Je travaille sur un lecteur audio. Lorsque la page est chargée, le fichier audio commence à être lu. Tout se passe bien, mais lorsque le fichier audio est lu, je veux ajouter une classe "playing" au bouton de lecture/pause. J'ai le code HTML suivant
<div class="player">
<audio id="audio" src="audio/testaudio.mp3" autoplay=""></audio>
<div class="btn__play pull-left" id="btnplay">
<i class="play-pause-button"></i>
</div>
</div>Attachez playing y pause et y effectuer des opérations.
var playBtn = document.getElementById('play');
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
$(playBtn).click(function() {
if (isPlaying) {
myAudio.pause()
} else {
myAudio.play();
}
});
myAudio.onplaying = function() {
isPlaying = true;
$(playBtn).removeClass('ion-play');
$(playBtn).addClass('ion-pause');
};
myAudio.onpause = function() {
isPlaying = false;
$(playBtn).addClass('ion-play');
$(playBtn).removeClass('ion-pause');
};
button {
font-size: 22px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<body>
<h3>Audio Test: <button id="play" class="ion-play"></button></h3>
<div>
<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
</div>
</body>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
