Question

嗨，我对网络开发还很陌生，所以如果我错过了显而易见的事情，请道歉！

我有一个页面，其中有一系列图像，每个图像都与一个音频文件相关联。

我已经“借用”了一些JS来点击音频B时停止音频A（然后播放音频B），但是我还希望能够通过再次点击图像来暂停音频A.或者最好打开音频控件，以便点击任何图像（和相关的音频文件）。

代码看起来像这样;

<body>

<audio id='spokes'>
  <source src="tunes/Spokes.mp3" type="audio/mpeg" />
  <source src="tunes/Spokes.ogg" type="audio/ogg" />
</audio>

<audio id='raptor'>
  <source src="tunes/raptor.mp3" type="audio/mpeg" />
  <source src="tunes/raptor.ogg" type="audio/mpeg" />
</audio>


<section>
<img class="trigger" src="img/spokes.png" onclick="document.getElementById('spokes').play()" />
<p>Spokes</p>
</section>

<section>
<img class="trigger" src="img/raptor.png" onclick="document.getElementById('raptor').play()" />
<p>Raptor</p>
</section>

<script type="text/javascript">
  document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
            audios[i].currentTime = 0;
        }
    }
}, true);
</script>

</body>

Answer 1

只需使用paused属性。

创建播放/暂停音频播放器的功能。

function playPause(id){
    var audio = document.getElementById(id);
    if(audio.paused){
        play(audio);
    }
    else if(!audio.paused && myAudio.duration <= 0){
        play(audio);
    }
    else{
        audio.pause();
    }
}


function play(audio){
    var playVideo = audio.play();
        if (playVideo !== undefined) {
            playVideo .then(_ => {
            console.log("Video playing...")
        }).catch(error => {
            console.log("could not play video");
        });
}

然后使用该函数并定位音频标签的id

<img class="trigger" src="img/spokes.png" onclick="playPause('spokes')" />

修改

play()是异步的。我已更新代码以显示此信息。感谢@Idan Beker

控制网页上图片中的多个音频文件

1 个答案: