0

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()"
   />
Robert Pierce
  • 1
  • 4
  • 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. –  Oct 22 '20 at 12:41
  • Here's example code: https://jsfiddle.net/gxu3faqn/ –  Oct 22 '20 at 12:50
  • Example with loading event: https://jsfiddle.net/khrismuc/8r0Lhwko/ –  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 –  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) –  Oct 22 '20 at 14:46
  • It gives me the same error even with mp3. – Robert Pierce Oct 22 '20 at 14:56
  • 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. –  Oct 22 '20 at 15:59

1 Answers1

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.

Cosimo Chellini
  • 1,560
  • 1
  • 14
  • 20