简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首页
文章
问答
课程
专题
下载
手游
词典
最近更新

首页  >  问答  >  正文

如何在Safari中使播放/暂停按钮正常运作？

我有一个在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粉323224129P粉323224129409 天前741

全部回复(1)我来回复

  • P粉659378577

    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();
});

    回复
    0
  • 取消回复