Javascript 单击图标播放开始播放声音，然后单击停止图标停止播放声音

我有一个图标播放链接，当我点击这个图标时，我想开始播放声音。在声音开始的那一刻，我想显示一个停止图标来代替播放图标

我正在尝试使用下面的代码执行此操作，但正在工作：

jquery:

$(function(){
    function play() {
        var audio = document.getElementById('audio1');
        if (audio.paused) {
            audio.play();
        }else{
            audio.pause();
            audio.currentTime = 0
        }
    }
});

这是你需要的吗

我拉了一把小提琴：

HTML:

---

为了使多个音频文件更具动态性，您需要为每个按钮分配一个id，该id带有一个与您希望它控制的歌曲id匹配的数字。之后，您需要向.click函数添加一些代码，这些代码将获得单击按钮的id，并播放具有相关id的歌曲

$('.play').click(function(){
        var i = $(this).attr('id');
        var c = parseInt(i); 
        var g = '#idofsong' + c; 
        g.play();
    });

编辑：这是一份工作报告

---

您还需要使用

var c=i.replace（/[A-Za-z$-]/g，”）而不是parseInt如果id包含字母
谢谢，我忘记添加了！有一些现有的，你有没有尝试浏览其中任何一个？是的，谢谢！顺便问一句，你知道怎么把它写得更像迪纳米克吗？例如，如果我有多个声音，而不是：var audioElement=document.getElementById（'audio1'）；，接收任何音频元素？
$(document).ready(function() {
    var audioElement = document.getElementById('audio1');
    $('#stop').hide();

    $('#play').click(function() {
        $('#play').hide();
        $('#stop').show();
        audioElement.play();
    });


    $('#stop').click(function() {
        $('#play').show();
        $('#stop').hide();
        audioElement.pause();
    });
});

$('.play').click(function(){
        var i = $(this).attr('id');
        var c = parseInt(i); 
        var g = '#idofsong' + c; 
        g.play();
    });