How to play an audio file from an external url using Javascript?

Question

I have an app (A) that makes an ajax request to a different app (B) to obtain a link for a wave sound file. Then, I want to use the link to play that sound file directly from my app (A).

I tried to create a new audio tag but I am getting the following error in the console.

In Chrome

Failed to play....NotSupportedError: Failed to load because no supported source was found.

In FireFox

Failed to play....NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable.

Here is my callback method which is triggered after the ajax request is returned with the Link from my App (B).

function playAudio(data) {
    if(!data || !data.DownloadUrl) {
        return;
    }

    var audio = new Audio(data.DownloadUrl);  
    audio.type = 'audio/wav';

    var playPromise = audio.play();

    if (playPromise !== undefined) {
        playPromise.then(function () {
            console.log('Playing....');
        }).catch(function (error) {
            console.log('Failed to play....' + error);
        });
    }
}

How can I successfully, get this wav file to play?

Blue · Accepted Answer · 2022-04-04 02:04:07Z

15

Audio works correctly cross server without an additional issues, see the example below.

There can be a number of reasons why this wouldn't work:

Check the network tab to make sure the wav file is in the correct location.
Check the console for any warning messages of why it couldn't load.
Check this question/answer for additional debugging steps.
Post back with the URL that you're trying to grab from, or additional information about the request.

async function playAudio() {
  var audio = new Audio('https://www2.cs.uic.edu/~i101/SoundFiles/StarWars60.wav');  
  audio.type = 'audio/wav';

  try {
    await audio.play();
    console.log('Playing...');
  } catch (err) {
    console.log('Failed to play...' + err);
  }
}

<a href="#" onclick="playAudio()">Play Audio</a>

edited Apr 4, 2022 at 2:04

answered Dec 19, 2017 at 19:15

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Junior Over a year ago

This code is not working for me. When I click on "Play Audio" link nothing play.

Blue Over a year ago

@MikeA What browser are you trying it in? Are you on the latest version?

Junior Over a year ago

I am using FireFox 57.0.2 (64-bit) On another note, when creating a fiddle the code works file jsfiddle.net/o2gxgz9r/20484

Blue Over a year ago

@MikeA Firefox didn't like the href="javascript:bleh, but I've updated my answer, and used onclick, and now it works.

Blue Over a year ago

@WilliamEntriken I'm using chrome, and the reason it wasn't working earlier was due to the fact that it was hosted on a non-secure website, and the cross origin request failed as a result. When Stack Overflow switched to https, it broke this answer as a result. Switching the audio file to one hosted over https, is now allowing it to work.

|

timthedev07 · Accepted Answer · 2021-07-03 21:08:13Z

3

Try using the import function instead:

const playAudio = async () => {
    const importRes = await import("./path/to/audio.mp3"); // make sure the path is correct
    var audio = new Audio(importRes.default);
    try {
      await audio.play();
      console.log("Playing audio");
    } catch (err) {
      console.log("Failed to play, error: " + err);
    }
}

answered Jul 3, 2021 at 21:08

timthedev07

4541 gold badge6 silver badges17 bronze badges

3 Comments

gutterball Over a year ago

Only thing that worked for me.

timthedev07 Over a year ago

I'm glad it helps!

Wisnu Over a year ago

This also worked for me, but if using TS had to adjust a bit to be able to import audio. Thanks

Stephen Kennedy · Accepted Answer · 2018-06-03 14:11:32Z

0

Instead use it in HTML 5 <audio> tag.

HTML 5 can play and control any audio format without using JavaScript.

edited Jun 3, 2018 at 14:11

Stephen Kennedy

21.8k24 gold badges99 silver badges114 bronze badges

answered Dec 19, 2017 at 19:13

adil khan

94 bronze badges

Collectives™ on Stack Overflow

How to play an audio file from an external url using Javascript?

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related