CODEWITHSUNDEEP
javascriptjquery
dancemc15
dancemc15

Reputation: 628

Creating a Javascript audio playlist with only play and pause

I want to create an audio playlist that can only play and pause. However, when the user is done listening to the entire song, I want to be able for that user to re-play the song.

Currently, the Javascript playlist only plays and stops the music. My pause button is not really working like a pause button. Not sure where I went wrong. And how exactly can I get the song to automatically re-set to the beginning once the user finishes listening to the song? I would very much appreciate the help on this! I wrote the HTML audio code already and just listed the Java Script below.

<script> // play/pause button
$(function() {
  $('#play').click(function(){
    $('#pause').attr('src',"media/pause.png");
  });
});

    $(".playBtn").on('click', function() {
       var target = $(this).attr("target");
       $("#audio").attr("src",target);

       $("#audio").trigger("play");
    });

    $(".pauseBtn").on('click', function() {
       $("#audio").trigger("pause");
    });
  });
</script>

Upvotes: 2

Views: 1095

Answers (2)

Joshua Dawson
Joshua Dawson

Reputation: 629

Audio tags have several events to which you can add listeners. Here is a link to a list of them: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

The "ended" event triggers when the audio is finished playing, so it could help with resetting the song to the beginning when the audio reaches the end.

$("#audio").on("ended", function () {
    this.currentTime = 0;
});

Upvotes: 2

guest271314
guest271314

Reputation: 1

You can use loop attribute at <audio> element to continuously loop single audio source. Substitute caching <audio> DOM element for jQuery object to call .play(), .pause() at click events.

javascript

$(function() {
  var audio = $("#audio")[0];

  $(".playBtn").on("click", function() {
    audio.play()
  });

  $(".pauseBtn").on("click", function() {
    audio.pause()
  });
})

html 

<audio id="audio" src="/path/to/audio/source" loop autoplay controls></audio>
<button class="playBtn">Play</button>
<button class="pauseBtn">Pause</button>

jsfiddle https://jsfiddle.net/kkf33dpr/

Upvotes: 1

Related Questions