- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Ich habe eine kleine Tastensituation, die in Chrome funktioniert, aber nicht in Safari. Ich habe versucht, Autoplay an verschiedenen Orten ohne Erfolg auszuprobieren. Was fehlt mir hier? Bitte beachten Sie, dass ich keine online veröffentlichten Sounds zum Teilen habe. Ursprünglich habe ich Base64-kodierte Sounddateien verwendet. Wenn ich einen kürzeren finden könnte, würde ich diesen Beitrag bearbeiten, aber der Herausgeber von SO beschränkt meine Beiträge auf diesen.
<!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>
Hier ist ein Link zu einer JS Fiddle, falls es hilft. Danke.
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();
});