user3263368 user3263368 - 1 year ago 74
jQuery Question

Add a class to div when HTML5 audio file is playing or pause

I am working on a audio player. When the page load audio file starts playing . Everything is fine but when audio file play i want to add a class "playing" to audio play/pause button i have following HTML code

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

Answer Source

Attach playing and pause event, and do operations there.

var playBtn = document.getElementById('play');
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
$(playBtn).click(function() {
  if (isPlaying) {
  } else {;

myAudio.onplaying = function() {
  isPlaying = true;
myAudio.onpause = function() {
  isPlaying = false;
button {
  font-size: 22px !important;
<script src=""></script>
<link href="" rel="stylesheet" />

  <h3>Audio Test: <button id="play" class="ion-play"></button></h3>
    <audio id="myAudio" src="" preload="auto">