Adding background music to webpage

Question

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%;">
</div>

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.

http://stackoverflow.com/questions/18826147/javascript-audio-play-on-click — DenseCrab, Apr 21 '16 at 13:44
You should not play background music on a web page at all. Most users are annoyed by this. Why should anyone want to enable it? Is this adding any value to your service? — Jonas Köritz, Apr 21 '16 at 13:44
@JonasKöritz If it runs automatically yes, but if i'm annoyed by background music i can just...you know.. NOT press the play button? — Koen, Apr 21 '16 at 13:47
I was asking if the music is adding any value at all to the service. — Jonas Köritz, Apr 21 '16 at 13:48
Jonas, based on that the webpage is built basically only to play the background music, I indeed think it does add value. I get what you're hinting at, but I'm not the idiot who adds a loud annoying song on my blog :P — Help Me, Apr 21 '16 at 17:27

pistou · Accepted Answer · 2016-04-21T15:35:46.893

1

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

<body>
    <script>
    function playMusic() {
        var jazzMusic = document.getElementById("audio-jazz");
        jazzMusic.play();

        var rainMusic = document.getElementById("audio-rain");
        rainMusic.play();
    }
    </script>

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

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

edited Apr 21 '16 at 15:35

answered Apr 21 '16 at 13:51

pistou

2,799
5
33
60

Just pasted it in and it worked... Felt like magic! :P All kidding aside, thank you very much, all respect to you! – Help Me Apr 21 '16 at 15:01
@HelpMe Here is [more informations](http://www.w3schools.com/html/html5_audio.asp) about ``. Also you might consider adding a `stop`button. – pistou Apr 21 '16 at 15:37

score 0 · Answer 2 · answered Apr 21 '16 at 14:02

Something like this should work for you:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin audio test</title>
</head>
<body>
  <div id="play">
   <img src="play.png" style="height: 100%; width: 100%;">
  </div>
  <audio id="audio-jazz">
    <source src="jazz.ogg" type="audio/ogg">
    <source src="jazz.mp3" type="audio/mpeg">
  </audio>
  <audio id="audio-rain">
    <source src="rain.ogg" type="audio/ogg">
    <source src="rain.mp3" type="audio/mpeg">
  </audio>
  <script>
    var playButton = document.getElementById('play');
    var rainAudio = document.getElementById('audio-rain');
    var jazzAudio = document.getElementById('audio-jazz');

    playButton.onclick = function(){
      rainAudio.play();
      jazzAudio.play();
      return false;
    };
  </script>
</body>
</html>

Here is a working (simplified) example: https://jsbin.com/yikifozedi/1/edit

Adding background music to webpage

2 Answers2