cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimanakah saya boleh membuat butang main/jeda berfungsi dengan betul dalam Safari?

Saya mempunyai situasi butang kecil yang berfungsi pada Chrome tetapi tidak pada Safari. Saya telah mencuba automain di tempat yang berbeza tetapi tidak berjaya. Apa yang saya hilang di sini? Sila ambil perhatian bahawa saya tidak mempunyai bunyi yang disiarkan dalam talian untuk dikongsi. Saya pada mulanya menggunakan fail bunyi yang dikodkan Base64. Jika saya dapat mencari yang lebih pendek, saya akan mengedit siaran ini, tetapi editor SO mengehadkan siaran saya untuk memasukkan yang ini. 

<!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>

Berikut ialah pautan ke JS Fiddle jika ia membantu. terima kasih.

https://jsfiddle.net/anonymouspenguin/kevhq7x1/1/

P粉323224129P粉323224129450 hari yang lalu786

membalas semua(1)saya akan balas

  • P粉659378577

    P粉6593785772023-09-07 10:42:58

    Saya tidak pasti cara untuk nyahpepijat dalam Safari, tetapi dalam Google Chrome saya klik pada elipsis (ikon 3 titik menegak), pilih Tetapan, kemudian Alat Pembangun.

    Pergi ke konsol > Kosongkan konsol >

    Saya mendapat ralat ini. Kedua-dua sifat onmouseup dan ontouchpad dalam label butang anda bercanggah dengan sifat lain. Sila alih keluar mereka. Setelah main balik berfungsi dengan betul, cari ralat seterusnya dan teruskan.

    Daripada meletakkan atribut dalam teg HTML butang, anda boleh mencuba ini: 

    const button = document.getElementById("playPauseButton");

button.addEventListener('mousedown', () => {
  document.getElementById("audioElement").play();
});

button.addEventListener('mouseup', function () {
  document.getElementById("audioElement").pause();
});

    balas
    0
  • Batalbalas