多个音频 html : 当前正在播放时自动停止其他音频
multiple audio html : auto stop other when current is playing
我在一个页面上有 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
按钮并检测音频何时暂停(或停止),如果是,则 pause/stop 正在播放所有可能的音频,然后开始播放与按下 play
按钮。
有了它,您将不需要 ID,因此您的 HTML 不会那么混乱。
此解决方案适用于页面中任意数量的音频
N.B - 我还添加了一个纯 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>
我在一个页面上有 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
按钮并检测音频何时暂停(或停止),如果是,则 pause/stop 正在播放所有可能的音频,然后开始播放与按下 play
按钮。
有了它,您将不需要 ID,因此您的 HTML 不会那么混乱。
此解决方案适用于页面中任意数量的音频
N.B - 我还添加了一个纯 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>