Unable to play an audio file in Vue web app

Question

I am working on a simple Vue application that plays two audio files and asks the user to determine the audio interval between them. I am currently unable to play any audio files. Whenever my playNote() function is called, Chrome throws the error Uncaught (in promise) DOMException: Failed to load because no supported source was found.

I've tried changing the audio file type in case it was an issue with the file being read. I've tried changing where the audio file is located in case Vue was having trouble accessing the file (currently the file is located in the same folder as the Vue component for troubleshooting purposes). Neither of these have resolved the error I am getting.

I have tried opening the Vue app in Firefox and get a similar string of errors when calling playNote():

“Content-Type” of “text/html” is not supported. Load of media resource failed.
NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable.
Cannot play media. No decoders for requested formats: text/html

I've stripped the code down to just the play button and relevant functionality in hopes that one of my other functions was accidentally interfering, but even with the below I get the same error:

<template>
  <div class="hello">
    <h1>Ear Training</h1>
    <button v-on:click='playNote'>Play</button>
  </div>
</template>

<script>

export default {
  name: 'Intervals',
  data: function() {
    return {
      middleC: 'middleC.aiff',
    }
  },

  methods: {
    // Selects a note 
    getNote: function() {
      return this.middleC;
    },

    // Plays a note, selected via getNote()
    playNote: function() {
      let note = new Audio(this.getNote);
      note.play();
    }
  },
}
</script>

Any help or guidance would be absolutely fantastic- thank you in advance!

Update:

I updated my code based on your suggestions, but I am still unable to play audio.

<template>
  <div class="hello">
    <h1>Ear Training</h1>
    <button v-on:click='playNote'>Play</button>
  </div>
</template>

<script>
const someSound = require("../assets/audio/middleC.mp3");

export default {
  name: "Intervals",
  data: () => ({
    someSound
  }),
  methods: {
    playNote() {
      console.log('calling playNote()');
      let note = new Audio(this.someSound);

      note.addEventListener("canplaythrough", () => { 
        console.log('event listener called');
        note.play();
      });
    }
  }
};
</script>

When I click the play button on the page,calling playNote() is read by the console, meaning the function is being called. However, event listener called is never logged, meaning the event listener is never acting.

where you put the audio file=**middleC.aiff**? most likely your app didn't find the audio file. — Sphinx
– Sphinx, Commented Jun 22, 2020 at 22:03
@Sphinx I have tried moving the file to a few different locations- still returns the same error. I originally put the audio file in an assets folder, but for testing purposes I placed the audio file in the same folder the above code was located in. — scm
– scm, Commented Jun 23, 2020 at 16:34

Andres Foronda · Accepted Answer · 2020-06-22 23:49:24Z

5

Try to import the audio this way

const sound = require("@/assets/hey.mp3");

I'll assume the same template, so I'm updating your export default object:

<script>
const someSound = require("@/assets/hey.mp3"); // require the sound

export default {
  name: "playASound",
  data: () => ({
    // you can access to the sound with this.someSound
    // same as someSound: someSound
    someSound
  }),
  methods: {
    // Selects a note
    // This method doesn't add value to the component, you can use
    // this.someSound directly
    getNote() {
      return this.someSound; 
    },

    playNote() {
      // Plays a note, selected via getNote()
      //let note = new Audio(this.getNote()); // or
      let note = new Audio(this.someSound);
      // note.play(); // new Audio will load asynchronously the audio
      // so instead of play directly after create note, you can listen for
      // a event and wait for it to know that the sound was loaded and can be
      // played

      // listen for the canplaythrough event
      note.addEventListener("canplaythrough", () => { 
        /* the audio is now playable; play it if permissions allow */
        note.play(); // the audio now can be played
      });
    }
  }
};
</script>

You can read more about Audio events here

Please let me know if something is not clear or your code doesn't work properly by using my solution.

answered Jun 22, 2020 at 23:49

Andres Foronda

1,4191 gold badge10 silver badges13 bronze badges

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

10 Comments

scm Over a year ago

I tried the code you provided above- I'm still unable to play. Though this time I am not getting the Chrome DOMException error. I added a console.log to the note .addEventListener function and it looks like it's not being called. I have the Play button set so it will call the playNote() function, and the function itself is being called but not the listener.

Andres Foronda Over a year ago

please update your code, I'll read it and help you, I test my code and it's working.

scm Over a year ago

I just updated my code along with my Chrome console response. Thank you so much!

Andres Foronda Over a year ago

Let's check if the audio is being loaded, add a console.log statement right after the require mp3:

Andres Foronda Over a year ago

const hornSound = require("@/assets/hey.mp3"); console.log(hornSound); // returns /media/hey.acec2ba3.mp3

|

Collectives™ on Stack Overflow

Unable to play an audio file in Vue web app

Update:

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update:

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related