我有一个在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/
P粉6593785772023-09-07 10:42:58
我不确定如何在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();
});