简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment faire fonctionner correctement le bouton lecture/pause dans Safari ?
P粉323224129
P粉323224129 2023-09-06 12:21:22
0
1
758

J'ai un petit problème de bouton qui fonctionne sur Chrome mais pas sur Safari. J'ai essayé d'essayer la lecture automatique à différents endroits sans succès. Qu'est-ce que j'oublie ici? Veuillez noter que je n'ai pas de sons mis en ligne à partager. J'utilisais initialement des fichiers audio codés en Base64. Si je pouvais en trouver un plus court, je modifierais ce message, mais l'éditeur de SO limite mes messages à celui-ci. 

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

Voici un lien vers un JS Fiddle si cela peut aider. Merci.

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

P粉323224129
P粉323224129

répondre à tous(1)
P粉659378577
P粉6593785772023-09-07 10:42:58 1 plancher

Je ne sais pas comment déboguer dans Safari, mais dans Google Chrome, je clique sur les points de suspension (icône à 3 points verticaux), sélectionnez Paramètres, puis Outils de développement.

Allez à la console > Effacer la console > Cliquez sur votre bouton

J'ai eu cette erreur. Les deux propriétés onmouseup et ontouchpad de l'étiquette de votre bouton sont en conflit avec d'autres propriétés. Veuillez les supprimer. Une fois que la lecture fonctionne correctement, recherchez l'erreur suivante et continuez.

Au lieu de mettre des attributs dans la balise HTML du bouton, vous pouvez essayer ceci : 

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

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

button.addEventListener('mouseup', function () {
  document.getElementById("audioElement").pause();
});
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！