title: Unable to play an audio file in Vue web app
body: <p>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 <code>playNote()</code> function is called, Chrome throws the error <code>Uncaught (in promise) DOMException: Failed to load because no supported source was found.</code></p>
  <p>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.</p>
  <p>I have tried opening the Vue app in Firefox and get a similar string of errors when calling <code>playNote()</code>:</p>
  <ul>
  <li><p><code>“Content-Type” of “text/html” is not supported. Load of media resource failed.</code></p>
  </li>
  <li><p><code>NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable.</code></p>
  </li>
  <li><p><code>Cannot play media. No decoders for requested formats: text/html</code></p>
  </li>
  </ul>
  <p>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:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;hello&quot;&gt;
      &lt;h1&gt;Ear Training&lt;/h1&gt;
      &lt;button v-on:click='playNote'&gt;Play&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  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();
      }
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>Any help or guidance would be absolutely fantastic- thank you in advance!</p>
  <h1><strong>Update</strong>:</h1>
  <p>I updated my code based on your suggestions, but I am still unable to play audio.</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;hello&quot;&gt;
      &lt;h1&gt;Ear Training&lt;/h1&gt;
      &lt;button v-on:click='playNote'&gt;Play&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  const someSound = require(&quot;../assets/audio/middleC.mp3&quot;);
  
  export default {
    name: &quot;Intervals&quot;,
    data: () =&gt; ({
      someSound
    }),
    methods: {
      playNote() {
        console.log('calling playNote()');
        let note = new Audio(this.someSound);
  
        note.addEventListener(&quot;canplaythrough&quot;, () =&gt; { 
          console.log('event listener called');
          note.play();
        });
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>When I click the play button on the page,<code>calling playNote()</code> is read by the console, meaning the function is being called. However, <code>event listener called</code> is never logged, meaning the event listener is never acting.</p>