LaRynk•3y ago

Rinkusu – 22-42 Jan 5

hi, "DOMException: The element has no supported sources." for audio playing, help please

let hihatSound = new Audio('hihat.mp3')

let hihatBtn = document.getElementById('hi-hat').addEventListener('click', e => { play('hihat') })

function play (instru) {
  console.log('play', instru)

  instru === 'hihat' && hihatSound.play()
}

let hihatSound = new Audio('hihat.mp3')

let hihatBtn = document.getElementById('hi-hat').addEventListener('click', e => { play('hihat') })

function play (instru) {
  console.log('play', instru)

  instru === 'hihat' && hihatSound.play()
}

14 Replies

ghardin137•3y ago

that means either you haven't finished loading the file or the file wasn't found where you told it to look or potentially you're trying to play a file in a browser that doesn't support an mp3

LaRynk•3y ago

google chrome I used to play mp3 sounds in chrome with react projects the path is 100% good

ghardin137•3y ago

right now it's trying to load it from the current path you're on so if you're on like /blah it's gonna try to load it from /blah/hihat.mp3 check your network tab in the devtools

LaRynk•3y ago

ghardin137•3y ago

../assets/hihat.mp3 is probably not the right path in the browser even though it is in your file system

LaRynk•3y ago

i see

ghardin137•3y ago

for example http://localhost:3000/../assets/hihat.mp3 wouldn't work properly

LaRynk•3y ago

so where do I find this path ? for the browser

ghardin137•3y ago

well it depends on where your webroot is i'm guessing thats that dist folder?

LaRynk•3y ago

it is ! thx

ghardin137•3y ago

ok. so then your assets folder would need to be inside dis dist

LaRynk•3y ago

yep

ghardin137•3y ago

and then you'd do /assets/hihat.mp3

reactibot•3y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. If you have a followup question, you may reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/928418137769123881 Threads are closed automatically after 12 hours, or if the member who started it reacts to a message with ✅ to mark that as the accepted answer.