CODEWITHSUNDEEP
javascriptjqueryhtmlaudio
Jim Fahad
Jim Fahad

Reputation: 635

HTML5 audio isn't paused using my JS script?

I added a audio(autoplay) on my website. And there's a music icon(fontawesome). Actually I want to pause and play the music, the icon should also toggle at the same time. This is my HTML markup:

<li class="music-icon">
<a href="#" onclick="pauseAudio()" >
<i class="fa fa-music"></i>
</a>
</li>

<audio autoplay loop id="myAudio">
    <source src="music/guitar.mp3">
</audio>

And this is my JS script:

(function(){
//audio Play and Pause
var audio = document.getElementById('myAudio');
$( ".music-icon a" ).click(function( event ) {
    //prevent a default
      event.preventDefault();
    //toggle font awesome icon (on/pause)
      $(this).find('i').toggleClass('fa-volume-off');
  });
//play/pause
function playAudio(){
    audio.play();
}
function pauseAudio(){
    audio.pause();
}
})();

Here is the website: http://www.freelancezonebd.com/jim/st/

Upvotes: 3

Views: 226

Answers (4)

zer00ne
zer00ne

Reputation: 43860

jsFiddle

JavaScript

var aIcon = document.querySelector('.music-icon a');
aIcon.addEventListener('click', function (event) {
    event.preventDefault();
    event.target = this;
    var aPlayer = document.getElementById('aPlayer');
    if (!aPlayer.paused) {
        aPlayer.pause();
        this.querySelector('i').classList.add('fa-music');
        this.querySelector('i').classList.remove('fa-volume-off');
    } else {
        aPlayer.play();
        this.querySelector('i').classList.add('fa-volume-off');
        this.querySelector('i').classList.remove('fa-music');
    }
}, false);

HTML

<li class="music-icon"><a href="#"><i class="fa fa-music"></i></a>

</li>
<!--change fa-music to fa-volume-off if autoplay-->
<audio loop id="aPlayer">
    <source src="https://glpjt.s3.amazonaws.com/so/av/111.mp3">
</audio>

CSS

li {
    list-style: none;
}

Upvotes: 1

Jim Fahad
Jim Fahad

Reputation: 635

I've done it finally using some CSS trick. Now the audio has the controls attr. Using css I just make the control transparent over the icon. And the icon is toggling when clicking on the transparent audio control. Markup:

<li class="music-icon">
  <a href="#"><i class="fa fa-music"></i></a>
  <audio autoplay loop id="myAudio" controls>
      <source src="music/guitar.mp3">
  </audio>

CSS:

/*Music*/
.music-icon {
  cursor: pointer;
  margin-right: 20px;
  overflow: hidden;
  position: relative;
  width: 30px;
}
audio#myAudio {
  left: 0;
  opacity: 0;
  padding-right: 10px;
  position: absolute;
  top: 12px;
}

And jQuery:

$('.music-icon').click(function(){
    $(this).find('a i').toggleClass('fa-volume-off');
});

May be it's not the global solution but it works for me. See the result now: http://www.freelancezonebd.com/jim/st/

Upvotes: 0

The Beast
The Beast

Reputation: 1

You may want to try getting at the element directly

try

$("#audioContainer")[0].pause();

Upvotes: 0

www139
www139

Reputation: 5227

Here is my code, tell me if I can improve my solution. Please include your CSS if you want a more accurate simulation.

window.addEventListener('load', function() {
  var playing = true;
  var audio = document.getElementById('myAudio');
  document.getElementById('audioMusicToggle').onclick = function() {
    if (playing == true) {
      //pause the music
      audio.pause();
      playing = false;
    } else {
      audio.play();
      playing = true;
    }
  };
});
<!--http://www.freelancezonebd.com/jim/st/music/guitar.mp3-->
<li class="music-icon">
  <input type="button" id="audioMusicToggle" value="Play/Pause">
</li>

<audio autoplay loop id="myAudio" controls>
  <source src="http://www.freelancezonebd.com/jim/st/music/guitar.mp3">
</audio>

Upvotes: 3

Related Questions