我有一個在Chrome上工作但在Safari上不工作的小按鈕情況。我嘗試在不同的地方嘗試自動播放，但沒有成功。我在這裡缺少什麼？請注意，我沒有在線發布聲音可以分享。我最初使用的是Base64編碼的聲音檔案。如果我能找到一個更短的，我會編輯這個帖子，但是SO的編輯器限制了我的帖子，包括這個。
<!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>
這是一個JS Fiddle的鏈接，如果有幫助的話。謝謝。
https://jsfiddle.net/anonymouspenguin/kevhq7x1/1/
我不確定如何在Safari中調試，但在Google Chrome中，我點擊省略號（3個垂直點圖示），選擇設置，然後選擇開發者工具。
到控制台>清除控制台>點擊您的按鈕
我得到了這個錯誤。您按鈕標籤中的兩個onmouseup和ontouchpad屬性與其他屬性衝突。請將它們移除。一旦播放正常工作，請找到下一個錯誤並繼續。
與其將屬性放在按鈕HTML標籤中，您可以嘗試這樣做：
const button = document.getElementById("playPauseButton"); button.addEventListener('mousedown', () => { document.getElementById("audioElement").play(); }); button.addEventListener('mouseup', function () { document.getElementById("audioElement").pause(); });