在鼠标单击事件上停止音轨

Question

我正在学习一些初学者前端开发。我创建了一个非常简单的网站，它使用了 Lightbox 工具包。我已经弄清楚如何在有人单击缩略图时启动音轨，但需要一些关于如何停止它的指示，或者为了更强大的解决方案，如果有人单击 'next' 箭头则播放适当的曲目。到目前为止，这是我的代码：

<!doctype html>

<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
    <script src="js/lightbox-plus-jquery.min.js"></script>

    <meta charset="utf-8">
    <title>verenti ltd</title>
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <meta name="author" content="SitePoint">

</head>

<body bgcolor="#F7FBED  ">

<div class="gallery">
    <a href="images/drake_big.jpg" data-lightbox="mygallery" data-title="nick drake"
       onclick=PlaySound("music/drake.mp3")><img src="images/drake_small.jpg"></a>
    <a href="images/prine_big.jpg" data-lightbox="mygallery" data-title="john prine"
       onclick=PlaySound("music/prine.mp3")> <img src="images/prine_small.jpg"></a>
    <a href="images/westerberg_big.jpeg" data-lightbox="mygallery" data-title="paul westerberg"
       onclick=PlaySound("music/westerberg.mp3")> <img src="images/westerberg_small.jpg"></a>
    <a href="images/townes_big.png" data-lightbox="mygallery" data-title="townes van zandt"
       onclick=PlaySound("music/townes.mp3")> <img src="images/townes_small.jpg"></a>
    <script>
        function PlaySound(path) {
            //this function will work like a toggler for sound track playing
            var sound = document.getElementById(path);
            if(sound && sound.currentTime > 0){ //check whether it is already playing
                sound.pause();// stop the sound
                sound.currentTime = 0 //
            }else if(sound){
                //this block to play paused sound track
                sound.play();
            }else{
                //this block to play new sound track
                sound= document.createElement('audio');
                sound.setAttribute('src', path);
                sound.setAttribute('id', path);
                sound.play();
            }
        }

    </script>
</div>
</body>
</html>

我想我可以更好地利用标签？

Answer 1

一个简单的解决方案是：

    <script>
    function PlaySound(path) {
            //this function will work like a toggler for sound track playing
            var sound = document.getElementById(path);
            if(sound && sound.currentTime > 0){ //check whether it is already playing
               sound.pause();// stop the sound
               sound.currentTime = 0 //
            }else if(sound){
                 //this block to play paused sound track

               sound.play();
            }else{
                 //this block to play new sound track

                  sound= document.createElement('audio');
                  sound.setAttribute('src', path);
                  sound.setAttribute('id', path);
                  sound.play();
            }


    }

</script>

在鼠标单击事件上停止音轨

Stopping an audio track on a mouse click event

html

javascript

jquery

lightbox

html5-audio