I'm stuck with playing multiple sounds on website. I've 3 sounds ,

  • Background sound
  • Hover Sound
  • Link Hover Sound

I'm playing background sound with following code,

    //play audio
    var  audioOn = true; 
    var bg_src = "audio/bgaudio.mp3";
    var audio = new Audio(); 
    audio.addEventListener("load", function() {
      audio.play();
    }, true);
    audio.src = bg_src;
    audio.autoplay = true;
    audio.loop = true;
    audio.volume = 0.2;     

    //play or pause audio
    $('.equalizer').on('click', function(e) {
        if (audioOn == false) {
            audio.play();
            audioOn = true;

        } else {
            audio.pause();
            audioOn = false;
        }
    });

This one is working well for background sound, need help to create functions to play & toggle playing of all sounds.

function playAudio(url){ }
function toggleSound() { }

Well I can see you're calling audio.play() when an element with the equalizer class is clicked on. If you want to create other events, I'm confused where your confusion is?

That being said ... just, PLEASE DON'T automatically play sounds from your web browser. It's an absolutely horrendous user experience.