How to play audio?

Question

I am making a game with HTML5 and JavaScript.

How could I play game audio via JavaScript?

Answer 1

If you don't want to mess with HTML elements:

var audio = new Audio('audio_file.mp3');
audio.play();

function play() {
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
  audio.play();
}

<button onclick="play()">Play Audio</button>

This uses the HTMLAudioElement interface, which plays audio the same way as the <audio> element.

---

If you need more functionality, I used the howler.js library and found it simple and useful.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

Answer 2

It's easy, just get your audio element and call the play() method:

document.getElementById('yourAudioTag').play();

Check out this example: http://www.storiesinflight.com/html5/audio.html

This site uncovers some of the other cool things you can do such as load(), pause(), and a few other properties of the audio element.

Answer 3

This is a quite old question but I want to add some useful info. The topic starter has mentioned that he is "making a game". So for everybody who needs audio for game development there is a better choice than just an <audio> tag or an HTMLAudioElement. I think you should consider the use of the Web Audio API:

While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications. The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications. The goal of this API is to include capabilities found in modern game audio engines and some of the mixing, processing, and filtering tasks that are found in modern desktop audio production applications.

Answer 4

http://www.schillmania.com/projects/soundmanager2/

SoundManager 2 provides a easy to use API that allows sound to be played in any modern browser, including IE 6+. If the browser doesn't support HTML5, then it gets help from flash. If you want stricly HTML5 and no flash, there's a setting for that, preferFlash=false

It supports 100% Flash-free audio on iPad, iPhone (iOS4) and other HTML5-enabled devices + browsers

Use is as simple as:

<script src="soundmanager2.js"></script>
<script>
    // where to find flash SWFs, if needed...
    soundManager.url = '/path/to/swf-files/';

    soundManager.onready(function() {
        soundManager.createSound({
            id: 'mySound',
            url: '/path/to/an.mp3'
        });

        // ...and play it
        soundManager.play('mySound');
    });
</script>

Here's a demo of it in action: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Answer 5

Easy with Jquery

// set audio tags with no preload

<audio class="my_audio" controls preload="none">
    <source src="audio/my_song.mp3" type="audio/mpeg">
    <source src="audio/my_song.ogg" type="audio/ogg">
</audio>

// add jquery to load

$(".my_audio").trigger('load');

// write methods for playing and stopping

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

// decide how to control audio

<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>

EDIT

To address @stomy's question, here is how you would use this approach to play a playlist:

Set your songs in an object:

playlist = {
    'song_1' : 'audio/splat.mp3',
    'song_2' : 'audio/saw.mp3',
    'song_3' : 'audio/marbles.mp3',
    'song_4' : 'audio/seagulls.mp3',
    'song_5' : 'audio/plane.mp3'
}

Use the trigger and play functions as before:

$(".my_audio").trigger('load');

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

Load the first song dynamically:

keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");

Reset the audio source to the next song in the playlist, when the current song ends:

count = 0; 
$('.my_audio').on('ended', function() { 
   count++;  
   $("#sound_src").attr("src", playlist[keys[count]])[0];
   $(".my_audio").trigger('load');
   play_audio('play');
});

See here for an example of this code in action.

Answer 6

Add a hidden <audio> element and play it as shown.

function playSound(url) {
  var ourAudio = document.createElement('audio'); // Create a audio element using the DOM
  ourAudio.style.display = "none"; // Hide the audio element
  ourAudio.src = url; // Set resource to our URL
  ourAudio.autoplay = true; // Automatically play sound
  ourAudio.onended = function() {
    this.remove(); // Remove when played.
  };
  document.body.appendChild(ourAudio);
}

Answer 7

If you are getting the following error:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

That means the user needs to interact with the website first (as the error message says). In this case you need to use click or just another event listener, so the user can interact with your website.

If you want to auto load the audio and don't want the user to interact with the document first, you could use setTimeout.

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)

<audio id="mySound" src="sound.mp3"></audio>

The sound will start after 0.5 second.

Answer 8

new Audio('./file.mp3').play()

Answer 9

With the security requirements that a user must interact with a webpage for audio to be allowed this is how I do it, based on reading many articles, including on this site

1. Define the required audio files in your html
2. Have a start game button with an onclick
3. When the button is clicked then play and pause ALL the audio files bar the one you want to play at the beginning

Because all the audio files have been "played" on the same OnClick, you can now play them any time in the game without restrictions

Note that for best compatability do not use wav files, MS do not support them

Use mp3 and ogg, that covers all devices

Example:

<audio id="welcome">
    <source src="URL/welcome.ogg" type="audio/ogg">
    <source src="URL/welcome.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

repeat as needed for all audio in the game

Then:

document.getElementById("welcome").play();
document.getElementById("welcome").pause();

repeat as needed except do not pause the audio you want to hear when the game starts

Answer 10

Pretty simple solution if you have an HTML tag like below:

<audio id="myAudio" src="some_audio.mp3"></audio>

Just use JavaScript to play it, like so:

document.getElementById('myAudio').play();

Answer 11

var song = new Audio();
song.src = 'file.mp3';
song.play();

Answer 12

I had some issues related to audio promise object returns and some issues related to user interaction with sounds I end up using this small object,

I would recommend to implement the play sounds the closest to the interaction event user is using.

var soundPlayer = {
  audio: null,
  muted: false,
  playing: false,
  _ppromis: null,
  puse: function () {
      this.audio.pause();
  },
  play: function (file) {
      if (this.muted) {
          return false;
      }
      if (!this.audio && this.playing === false) {
          this.audio = new Audio(file);
          this._ppromis = this.audio.play();
          this.playing = true;

          if (this._ppromis !== undefined) {
              this._ppromis.then(function () {
                  soundPlayer.playing = false;
              });
          }

      } else if (!this.playing) {

          this.playing = true;
          this.audio.src = file;
          this._ppromis = soundPlayer.audio.play();
          this._ppromis.then(function () {
              soundPlayer.playing = false;
          });
      }
  }
};

And implement it as follow:

<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>

Answer 13

I used this method to play a sound...

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();

Answer 14

If you want to be able to play the sound even when the browser-tab is currently not selected, you have to load the audio-resource on page load.

Like so:

var audio = new Audio('audio/path.mp3');

function playSound(){
    audio.play();
}

See this question for more detail

Answer 15

const playAudio = (path = 'defaultPath') => new Audio(path).play()
playAudio('path')

Answer 16

if you want to play your audio whenever the page is opened then do like this.

<script>
  function playMusic(){
  music.play();
  }
  </script>
<html>
  <audio id="music" loop src="sounds/music.wav" autoplay> </audio>
  </html>

and call this playMusic() whenever you need in your game code.

Answer 17

You can use Web Audio API for playing sounds. There are quite some audio libraries out there like howler.js, soundjs etc. If you don't worry about old browsers then you can also check on http://musquitojs.com/. It provides a simple API to create and play sounds.

For example, to play a sound all you've to do is.

import $buzz from 'musquito';

const buzz = $buzz('gunfire.mp3');

buzz.play();

The library also supports Audio Sprites.

Answer 18

Just use this:

<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>

Or, to make it simpler:

<video controls="" autoplay="" name="media">

<source src="Sound URL Here" type="audio/mpeg" />

</video>

Sample:

<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>

Have NO IDEA if this works on other browsers other than Chrome 73!!

Answer 19

This is some JS i came up with on a baby AI project im working with. i hope this is able to help you out.

<!DOCTYPE html>
<html>
<head>
    <title>
        js prompt AI
    </title>
    <style>
        #button {
            border: 1px solid black;
            border-radius: 10px;
            font-size: 22px;
            height:65px;
            width:100px;
            text-align: center;
            line-height: 65px;
        }
    </style>
</head>
<body>

    <audio id="myAudio" src="./how_are_you.m4a"></audio>
    <p>To Interact with the AI please click the button</p>
    <div id=button>click</div>

    <script>

       var button = document.getElementById("button");
       function playBack() {
           button.addEventListener("click", function (){
            var talk = prompt("If you wish for the AI to respond type hi");
            var myAudio = document.getElementById("myAudio");

            if(talk === "hi") {
                    myAudio.play();
            }
           }) ;



       }
       playBack();
   </script>
</body>

</html>

Answer 20

I had some issues with playing audio, especially since Chrome has updated that the user has to interact with the document first.

However, across almost all solutions I found is that the JS code has to actively set listeners (e.g. button clicks) to receive user events in order to play the audio.

In my case I just wanted my game to play BGM as soon as the player interacts with it, so I made myself a simple listener that keeps checking whether the web page is being interacted or not.

const stopAttempt = setInterval(() => {
    const audio = new Audio('your_audio_url_or_file_name.mp3');
    const playPromise = audio.play();
    if (playPromise) {
      playPromise.then(() => {
        clearInterval(stopAttempt)
      }).catch(e=>{
        console.log('' + e);
      })
    }
}, 100 )

Answer 21

In react, you can use ref:

// typescript
const audRef = useRef(null);
const playAudio = () => {
  (audRef.current as any).play();
}
...
// html
<audio controls src={your_audio} ref={audRef} />
<button onClick={playAudio}>Play</button>

Answer 22

Here is a solution for the year 2020 when you are seeing the error:

[Error] Unhandled Promise Rejection: NotSupportedError: The operation is not supported. (anonymous function) rejectPromise play (anonymous function) (testaudio.html:96) dispatch (jquery-3.4.1.min.js:2:42577)

---

<div onclick="new Audio('/assets/test.mp3').play()">aaa</div>

Don't be slick and think ooh that's an old school oclick, I'll just move that down the page to my jQuery or my external JavaScript file. Nope. It needs to be an onclick.