Help Me Help Me - 1 year ago 69
HTML Question

Adding background music to webpage

So, I've had some issues with this. Simply put, I want to have a play button on my webpage which plays TWO files simultaniously. The files are Jazz.ogg with Jazz.mp3 and Rain.ogg with Rain.mp3. The play button in the HTML is put such as;

<div class="play">
<img src="play.png" style="height: 100%; width: 100%;">

I have a bit of experience with HTML and CSS, but when it comes to Javascript, I'm as much of use as the font-stretch element.

Thanks in advance!
/ Chris

Answer Source

This is an html5 solution. Music will be played only once you clicked the play image.

    function playMusic() {
        var jazzMusic = document.getElementById("audio-jazz");;

        var rainMusic = document.getElementById("audio-rain");;

    <div class="play">
       <img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();">
    <audio id="audio-jazz" src="Jazz.ogg"></audio>
    <audio id="audio-rain" src="Rain.ogg"></audio>

Make sure to add the right path to your .ogg files.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download