playing sound onClick event in Vue returns Uncaught (in promise) DOMException: Failed to load because no supported source was found

Question

I am trying to play an mp3 sound when I click on an image, but currently I get this error : Uncaught (in promise) DOMException: Failed to load because no supported source was found

Why isn't my audio playing and how can I make it play?

my function:

 playSound() {
  const sound = new Audio("/src/assets/sounds/openbeersound.wav");
  sound.play();
    }

  <img
    style="width: 100%;"
    :src="beer.image_url"
    alt="placeholder"
    @click="playSound()"
   />

mp3s end in `.mp3`, not `.wav`. Anyway, try loading the sound when your app loads, not in the click event. Put it in your app's `data`, then use `this.sound.play()` in the handler. — ChrisG, Oct 22 '20 at 12:41
Example with loading event: https://jsfiddle.net/khrismuc/8r0Lhwko/ — ChrisG, Oct 22 '20 at 12:57
it works when I add your mp3 url, but not when I load a file from my assets, thanks — Robert Pierce, Oct 22 '20 at 13:06
That means the issue is exactly what the error says: your browser doesn't support playing wav files, are you using Chrome by chance? https://developer.mozilla.org/zh-TW/docs/Web/HTML/Supported_media_formats#WAVE_PCM — ChrisG, Oct 22 '20 at 13:31
Yes. The same error appears in Firefox as well. I tried playing an mp3, still the same error. — Robert Pierce, Oct 22 '20 at 14:18
In that case it's probably best to provide multiple formats (other than .wav) — ChrisG, Oct 22 '20 at 14:46
It doesn't matter whether it's a wav or an mp3, this approach should play both — Robert Pierce, Oct 22 '20 at 14:58
It looks like you'll also get that error message if the path to the sound file is wrong; I updated the fiddle so it prints an error message. — ChrisG, Oct 22 '20 at 15:59

score 0 · Answer 1 · answered Oct 22 '20 at 12:39

0

Make sure the audio is loaded correctly. How to bind img src to data in Vue (images or audio are the same)

If you want to learn more about it.

answered Oct 22 '20 at 12:39

Cosimo Chellini

1,321
12
18

I have an image binded to the img, do I need to bind audio as well? – Robert Pierce Oct 22 '20 at 12:42
yes, make sure in the network panel that the wav file is loaded correctly and the server don't return a 404 – Cosimo Chellini Oct 22 '20 at 12:43

playing sound onClick event in Vue returns Uncaught (in promise) DOMException: Failed to load because no supported source was found

1 Answers1