我有一個(gè)在Chrome上工作但在Safari上不工作的小按鈕情況。我嘗試在不同的地方嘗試自動(dòng)播放,但沒有成功。我在這裡缺少什麼?請(qǐng)注意,我沒有在線發(fā)布聲音可以分享。我最初使用的是Base64編碼的聲音檔案。如果我能找到一個(gè)更短的,我會(huì)編輯這個(gè)帖子,但是SO的編輯器限制了我的帖子,包括這個(gè)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>音頻播放和暫停</title> <link rel="stylesheet" href="styles.css"> </head> <body> <audio id="audioElement" preload="auto"> <source src="sound.mp3" type="audio/mpeg"> </audio> <button id="playPauseButton" onmousedown="playAudio()" onmouseup="pauseAudio()" ontouchstart="playAudio()" ontouchend="pauseAudio()">播放/暫停</button> <script> function playAudio() { document.getElementById("audioElement").play(); } function pauseAudio() { document.getElementById("audioElement").pause(); } </script> </body> </html>
這是一個(gè)JS Fiddle的鏈接,如果有幫助的話。謝謝。
https://jsfiddle.net/anonymouspenguin/kevhq7x1/1/
我不確定如何在Safari中調(diào)試,但在Google Chrome中,我點(diǎn)擊省略號(hào)(3個(gè)垂直點(diǎn)圖示),選擇設(shè)置,然後選擇開發(fā)者工具。
到控制臺(tái)>清除控制臺(tái)>點(diǎn)擊您的按鈕
我得到了這個(gè)錯(cuò)誤。您按鈕標(biāo)籤中的兩個(gè)onmouseup和ontouchpad屬性與其他屬性衝突。請(qǐng)將它們移除。一旦播放正常工作,請(qǐng)找到下一個(gè)錯(cuò)誤並繼續(xù)。
與其將屬性放在按鈕HTML標(biāo)籤中,您可以嘗試這樣做:
const button = document.getElementById("playPauseButton"); button.addEventListener('mousedown', () => { document.getElementById("audioElement").play(); }); button.addEventListener('mouseup', function () { document.getElementById("audioElement").pause(); });