嗨，我对网络开发还很陌生，所以如果我错过了明显的内容，我深表歉意!
我有一个页面，其中有一系列图像，每个图像都与一个音频文件关联。
我“借用”了一些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>请您参考如下方法:
只需使用 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
