Comment créer un bouton de lecture/pause audio?

Question

J'ai récemment appris l'intégration de l'audio en HTML comme ci-dessous.

<audio controls> 
    <source src="sample.ogg" type="audio/ogg"> 
    <source src="sample.mp3" type="audio/mpeg"> 
Your browser does not support the audio element. 
</audio> 

qui affiche quelque chose comme un rectangle avec différentes options sur elle comme pause/lecture, téléchargement, volume réglé etc.

Mais comment puis-je au lieu de cela un bouton « rectangle de lecture audio » que lorsque cliqué joue l'audio une fois et en cliquant dessus pendant que l'audio est en pause et en cliquant à nouveau sur la lecture continue.

Answer 1

Vous pouvez utiliser Javascript pour effectuer de telles actions.

Effectuez les opérations suivantes

var myAudio = document.getElementById("myAudio"); 
var isPlaying = false; 

function togglePlay() { 
    if (isPlaying) { 
    myAudio.pause() 
    } else { 
    myAudio.play(); 
    } 
}; 
myAudio.onplaying = function() { 
    isPlaying = true; 
}; 
myAudio.onpause = function() { 
    isPlaying = false; 
}; 

paramètres, remplacez les à la vôtre.

Answer 2

Voici un exemple simple avec JS pur. J'utilise une classe sur le bouton pour savoir si l'audio joue ou non, vous pouvez utiliser la même classe pour une interface utilisateur différente lorsque le bouton est en mode lecture/pause.

Lien: https://jsfiddle.net/p4mksfm1/

<audio id="testAudio" hidden src="https://api.twilio.com/cowbell.mp3" type="audio/mpeg"> 
</audio> 

<button id="playAudio">Play</button> 

<script type="text/javascript"> 
document.getElementById("playAudio").addEventListener("click", function(){ 
    var audio = document.getElementById('testAudio'); 
    if(this.className == 'is-playing'){ 
    this.className = ""; 
    this.innerHTML = "Play" 
    audio.pause(); 
    }else{ 
    this.className = "is-playing"; 
    this.innerHTML = "Pause"; 
    audio.play(); 
    } 

}); 
<script>