CODEWITHSUNDEEP
javascriptjquerycsshtml
Xander
Xander

Reputation: 1011

How to use JavaScript to control audio element

Firstly I'm trying not to use the default html5 standard controls and I'd be happy to use jQuery if possible but I've taken it out for now as I was unsure of what the problem is.

At the moment I'm simply trying to have a play button which plays some music once clicked, which will change to a pause button. This pause button will then obviously pause the music once clicked.

I will leave some annotation in so you can see some of the things I have tried. Currently the play button appears but nothing happens when it is clicked.

Any help would be greatly appreciated.

HTML:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/audio-controls.js"></script>
<link rel="stylesheet" href="css/menu.css">
</head>

<div id="content-container">
     <audio id="music">
     <source src="media/mexico-music.mp3" type="audio/mpeg"/>
     </audio>
     <button id="play-music-button" class="play"></button>
</div>

CSS:

#play-music-button {
    height:60px;
    width: 60px;
    border: none;
    background-size: 50% 50%;
    background-position: center;
}

.play {
    background: url("../assets/play.png") no-repeat;
}

.pause {
    background: url("../assets/pause.png") no-repeat;
}

JS:

$(document).ready(function() {
var music = document.getElementById("music");
var play_music_button = document.getElementById("play-music-button");

function playAudio() {
    if (music.paused) {
        music.play();
        play_music_button.innerHTML = "Pause";
        /*play-music-button.className = "";
        play-music-button.className = "pause";*/
    } else {
        music.pause();
        play_music_button.innerHTML = "Resume";
        /*play-music-button.className = "";
        play-music-button.className = "play";*/
    }
    music.addEventListener('ended',function() {
        play_music_button.innerHTML = "Play";
    });
}
play-music-button.addEventListener("click", playAudio);
});

Upvotes: 2

Views: 8507

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

You're calling play_music_button as play-music-button, and you've defined that twice when you only need it inside of your defined function. And you need to add an ended event listener to set the button back to "Play"

$(document).ready(function() {
  var music = document.getElementById("music");
  var play_music_button = document.getElementById("play-music-button");

  function playAudio() {
    if (music.paused) {
      music.play();
      play_music_button.className = 'pause';
    } else {
      music.pause();
      play_music_button.className = 'play';
    }
    music.addEventListener('ended',function() {
      play_music_button.className = 'play';
    });
  }
  play_music_button.addEventListener("click", playAudio);
});
#play-music-button {
  height: 60px;
  width: 60px;
  border: none;
  background-size: 50% 50%;
  background-position: center;
}

.play {
  background: url("https://image.flaticon.com/icons/png/512/0/375.png") no-repeat;
}

.pause {
  background: url("http://downloadicons.net/sites/default/files/pause-icon-14021.png") no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-container">
  <audio id="music">
    <source src="http://skwaat.com/clips/iloveyou.mp3" type="audio/mpeg">
  </audio>
  <button id="play-music-button" class="play"></button>
</div>

Upvotes: 3

Related Questions