Question

我正在根据以下上一个问题的答案使用以下代码。目的是能够单击三个单独的jpg图像（水平显示），以便在单击相应的图像时播放/暂停三个mp3（即每个图像一个mp3）。代码完成了此操作，但是当单击新图像但未单击前一个图像以暂停时，mp3会相互播放。

我正在寻找一种方法，当单击新图像时可以停止播放先前的音频，从而播放新的音频（并非所有用户都将在单击下一个图像/新音频之前暂停音频）。因此，我想知道是否有人可以指出我正确的方向。我显然不精通HTML（尽管可以学习），但是我是一名学者，试图提出一个包含特定图像和随附音频的简单研究成果网站。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        var audio1 = new Audio("1st MP3 url");
        audio.onended = function () { }
        audio.oncanplaythrough = function () { }
        var playing = false;
        function ControlAudio1() {
            playing = !playing;
            if (playing)
                audio1.play()
            else
                audio1.pause()
        }
    </script>
    <input type="Image" id="" style="height:250px;width:250px;" src="1st JPG url" onclick="ControlAudio1()">

    <script>
        var audio2 = new Audio("2nd MP3 url");
        audio.oncanplaythrough = function () { }
        audio.onended = function () { }
        var playing = false;
        function ControlAudio2() {
            playing = !playing;
            if (playing)
                audio2.play()
            else
                audio2.pause()
                audio2.currentTime = 0;
        }
    </script>

    <script>
        var audio3 = new Audio("3rd MP3 url");
        audio.oncanplaythrough = function () { }
        audio.onended = function () { }
        var playing = false;
        function ControlAudio3() {
            playing = !playing;
            if (playing)
                ``audio3.play()
            else
                audio3.pause()
        }
    </script>
    <input type="Image" id="" style="height:250px;width:250px;" src="3rd JPG url" onclick="ControlAudio3()">

</body>
</html>

单击新音频时，停止播放先前的音频

0 个答案: