CODEWITHSUNDEEP
javascriptaudiohowler.js
Lord Goderick
Lord Goderick

Reputation: 985

Javascript: How to prevent audio playing on page load?

I am using howler.js to implement my audio. What I have is extremely simple but the problem is the audio plays on page load even though I didn't specify as such. Here is what I have:

var hoverSound = new Howl({
  src: ['../audio/hover.mp3']
 });

function whatEver() {
    if (whatever) {
    hoverSound.play();
   }
 }

This is my first time doing this so I'm not sure if there's like a "stop" audio or something. The above code works as intended after initial page load but refreshing the page means the sound plays on every initial load. How can I prevent this from happening? Thanks.

Upvotes: 0

Views: 684

Answers (2)

ewwink
ewwink

Reputation: 19154

from your variable hoversound I'm guessing you want play sound when element hovered (mouseenter) and stop when leave (mouseleave) 

var hoverSound = new Howl({
  src: ['https://howlerjs.com/assets/howler.js/examples/player/audio/rave_digger.webm']
});

document.getElementById("player").addEventListener('mouseenter', function() {
  hoverSound.play();
  this.innerHTML = "Leave to Stop";
  this.className += "playing";
  console.log("Playing...");
});
document.getElementById("player").addEventListener('mouseleave', function() {
  hoverSound.stop();
  this.innerHTML = "Hover to Play";
  this.className = "";
  console.log("Stopped...");
});
#player {
  width: 100px;
  background-color: #dd5427;
  padding: 5px;
  color: white;
  font-weight: bold;
}

.playing {
  background-color: #689e0f !important
}
<script src="https://howlerjs.com/assets/howler.js/dist/howler.min.js"></script>
<div id="player">Hover to Play</div>

Upvotes: 1

Sv Sv
Sv Sv

Reputation: 345

Use cookies to store 'whatever' variable.

Upvotes: 0

Related Questions