javascript - 多个音频html:当前播放时自动停止其他
问题描述
我在一个页面上有 2 个音频实例。处理音频播放和暂停不是问题。问题是当音频正在播放并且我点击另一个播放时,我无法让另一个音频实例停止播放图标修改
任何帮助将不胜感激:)谢谢
$('section .play').click(function(){
var $this = $(this);
// starting audio
var audioID = "sound" + $(this).attr('id');
$this.toggleClass('active');
if($this.hasClass('active')){
$("#" + audioID).trigger('play');
} else {
$("#" + audioID).trigger('pause');
}
});
section {
display: block;
margin-bottom: 30px;
padding: 0 20px;
text-align: center;
width: 200px;
height: 200px;
position: relative;
}
section .btn {
background: #ccc;
border: 0 none;
cursor: pointer;
display: block;
height: 60px;
line-height: 60px;
position: absolute;
width: 200px;
z-index: 100;
bottom: 0;
text-align: center;
}
section .btn:after {
content: "play";
}
section .btn.active:after {
content: "pause";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section><img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
<p class="play btn" id="7"></p>
<p><audio id="sound7">
<source src="https://room1015.com/img/cms/MP3/Hanging-out-in-room-1015.mp3" type="audio/mpeg" />
</audio></p>
</section>
<section><img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
<p class="play btn" id="6"></p>
<p><audio id="sound6">
<source src="https://room1015.com/img/cms/MP3/HOLLYROSE.mp3" type="audio/mpeg" />
</audio></p>
</section>
解决方案
我会遍历每个.play
按钮并检测音频何时暂停(或停止),如果是这样,则暂停/停止正在播放的所有可能的音频,然后开始播放与按下的play
按钮匹配的音频。
有了这个,您将不需要 ID,因此您的 HTML 将不那么混乱。
此解决方案适用于页面中的任何数量的音频
注意 -我还添加了一个纯 JS 解决方案。
//pure JS Version
const playButton = document.querySelectorAll('section .play')
playButton.forEach(el => {
const currentAudio = el.nextElementSibling.querySelector('audio')
el.addEventListener('click', e => {
if (currentAudio.paused) {
document.querySelectorAll('audio').forEach(el => el.pause())
currentAudio.play()
playButton.forEach(el => el.classList.remove('active'))
e.currentTarget.classList.add('active')
} else {
e.currentTarget.classList.remove('active')
currentAudio.pause()
}
})
})
//jQuery Version
//const playButton = $('section .play')
//playButton.each((_, el) => {
// const currentAudio = $(el).next().find('audio')[0]
// $(el).on('click', e => {
// if (currentAudio.paused) {
// $('audio').each((_, el) => el.pause())
// currentAudio.play()
// playButton.removeClass('active')
// $(e.currentTarget).addClass('active')
// }
// else {
// e.currentTarget.classList.remove('active')
// currentAudioJs.pause()
// }
// })
//})
section {
display: block;
margin-bottom: 30px;
padding: 0 20px;
text-align: center;
width: 200px;
height: 200px;
position: relative;
}
section .btn {
background: #ccc;
border: 0 none;
cursor: pointer;
display: block;
height: 60px;
line-height: 60px;
position: absolute;
width: 200px;
z-index: 100;
bottom: 0;
text-align: center;
}
section .btn:after {
content: "play";
}
section .btn.active:after {
content: "pause";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
<p class="play btn"></p>
<p>
<audio>
<source src="https://room1015.com/img/cms/MP3/Hanging-out-in-room-1015.mp3" type="audio/mpeg" />
</audio>
</p>
</section>
<section>
<img src="https://unsplash.it/g/300?image=29" width="200" height="200" />
<p class="play btn"></p>
<p>
<audio>
<source src="https://room1015.com/img/cms/MP3/HOLLYROSE.mp3" type="audio/mpeg" />
</audio>
</p>
</section>
推荐阅读
- c++ - 将可执行文件移动到 make 文件中的不同目录后运行可执行文件
- c# - iOS强制应用程序进入睡眠模式后,有没有办法保持互联网连接/套接字打开?
- amazon-web-services - 在 aws ECS 集群中显示 docker 容器日志
- git - git "fatal: Authentication failed for 'http:...'" 来自 Microsoft Visual Studio Team Foundation Server
- angular - 在另一个可观察事件 Angular 上返回可观察值
- java - Java:如何从 NIO Server 向所有通道发送消息
- php - 在 Laravel 中插入多对多关系表
- angular - Internet Explorer 上的 Angular 7 应用程序返回 XML5619:文档语法错误
- jmeter - Jmeter上的Blazemeter Script Runninf不会将数据保存在数据库中
- php - Wordpress Ninja 表单后处理挂钩不起作用