On audio.play() song is not triggered

Question

I want to play a track in my React web app. I follow a video and try everything that is done there, but when I click the button to call a function which should trigger audio.play(), the track isnt played.

Below is the code I have so far.

This is the button with some scss to it:

<div className="audio-player">
    <button className="play"><i className="ion-play" onClick={this.playTrack}></i></button>
    <div className="seek-bar">
        <div className="fill"></div>
        <div className="handle"></div>
    </div>
</div>

As you can see, the onClick{} should call this function:

playTrack = () => {
    let audio = new Audio('song.ogg');
    audio.play();
}

But It doesnt play. Now, my guess is that the song I am providing can't be found or binded. I tried the mp3 format also the ogg format.I am storing the track in the folder directory where the src folder is. I converted the mp3 format to an ogg and when I open it from my folder it opens in the browser. But sadly It cant be played in my web app.

So my goal is to hear the song being played when the onClick is triggered.

Did you check whether the event is getting triggered or not? — Krishna Prashatt, May 03 '19 at 10:13
You _**cannot**_ `play` an audio just after it's created since it's not ready/loaded at this moment yet. You have to listen to `load` event instead. — hindmost, May 03 '19 at 10:21
@hindmost You can. See https://stackoverflow.com/a/18628124/8237835 for an example. I don't think HTML5AudioElement even utilizes specifically the `load` event. — Khauri, May 03 '19 at 10:25
OP, you should add more of your code so that we can verify `playTrack` is called and also check the console/network to see if `song.ogg` was actually loaded. Try replacing the url with [another one](https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3) and seeing if that plays. — Khauri, May 03 '19 at 10:31
@Khauri McClain `load` event fires for all external resources, incl. audios. — hindmost, May 03 '19 at 10:43
@hindmost `load` is [not mentioned on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Events) which leads me to believe if it is fired, it's not significant for HTMLAudio. But if you look at [this fiddle](https://jsfiddle.net/27jLgvba/1/) you'll see that it actually never gets triggered. The audio doesn't need to be loaded in all at once before it's playable. — Khauri, May 03 '19 at 11:15

score 0 · Answer 1 · answered May 03 '19 at 10:17

You can try this way

<input type="button" value="PLAY"  onclick="play()">
<audio id="audio" src="song.ogg" ></audio>

  <script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
  }
  </script>

try to adapt, hope it helps ;)

score 0 · Answer 2 · answered May 03 '19 at 11:55

After logging in the browser console this is what I found out:

Promise { "rejected" }

<state>: "rejected"

<reason>: DOMException: "The media resource indicated by the src attribute or assigned media provider object was not suitable."

<prototype>: PromiseProto

score 0 · Answer 3 · answered May 03 '19 at 14:11

I did this. Thanks everybody for the help! The solution is this:

I imported the "ogg" format audio file. Use 'ogg' since firefox does not support mp3.

import song from './song.ogg';

2.I set it in state in the constructor:

audio: new Audio(song)

After that this is the function I am calling onClick. Not sure if I need specify the format , but the import was important:

playTrack = () => {

        const {audio} = this.state;
        audio.type = 'audio/ogg';



        var playPromise = audio.play();
        console.log(playPromise);
        playPromise.data = audio;

        if(playPromise !== undefined){
        playPromise.then(function() {
            console.log("Playing");
        }).catch(function (error) {
            console.log(error);
        });
      }
    }

So you need to use an mp3 to ogg converted and then put your audio ogg format files in the same folder or wherever you prefer and then import them to the component.

On audio.play() song is not triggered

3 Answers3