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 ponent 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.

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 ponent 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.

• javascript
• vue.js
• audio

Share Improve this question Follow edited Jun 23, 2020 at 21:52 scm asked Jun 22, 2020 at 21:54 scmscm 6122 silver badges99 bronze badges 2

• where you put the audio file=**middleC.aiff**? most likely your app didn't find the audio file. – 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 Commented Jun 23, 2020 at 16:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 ponent, 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.