首頁猿問多個音頻...

多個音頻 html：當前播放時自動停止其他音頻

JavaScript

躍然一笑 2023-10-14 11:12:48

我在一個頁面上有 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>

查看完整描述

1 回答

30秒到達戰場

TA貢獻1828條經驗獲得超6個贊

我將循環遍歷每個.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";

}

<p>

<audio>

</audio>

</p>

</section>

<p>

<audio>

</audio>

</p>

</section>

反對回復 2023-10-14

1 回答
0 關注
224 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

多個音頻 html：當前播放時自動停止其他音頻

多個音頻 html：當前播放時自動停止其他音頻

1 回答

添加回答