What went wrong

Question

https://code.sololearn.com/W0R227d1RSBa/?ref=app

Answer 1

You could also use a function statement instead of the arrow function to reference the desired context/object.

Arrow functions don't bind this, but function statements do.

https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/

Answer 2

Okay thanks bro Mustafa A

Answer 3

The audio tag is missing a couple of things...
- need to use https instead of http, this is causing the initial CORS problem - mixed content

- also need to add crossorigin = "anonymous" to the audio tag, this will resolve the next CORS issue -
MediaElementAudioSource outputs zeroes due to CORS access restrictions

<audio crossorigin="anonymous" src="https://www.sololearn.com/uploads/audio.mp3"></audio>

Answer 4

data-playing

Answer 5

Mustafa A the button

Answer 6

ODLNT thanks fixed it, but it seems there is an area with the code reading the audio

Answer 7

Well the dataset is undefined. What's "this.dataset" supposed to be?

Answer 8

I don't think you are using "this" right. What do you think this is referencing here?

Answer 9

Yeah. That's a misunderstanding of how this works. This references the object context.

The "addEventListener" is a function of the button. But it runs on the context it's executed. If that "this" was used inside the button object itself, that would work. But here, "this" reference the surrounding object context. Which is the global root object, "window". Not the button.

You need to add "event" (or any other reference name) as parameter to the function used to handle the event. You can then reference the button object from the event that it raised, using "event.target".

Like this:

playButton.addEventListener("click",(event)=>{
const btn = event.target; if(audioContext.state==="suspended"){
audioContext.resume();
}
if(btn.dataset.playing==='false'){
audioElement.play();
btn.dataset.playing='true';
}
else if(btn.dataset.playing==='true'){
audioElement.pause();
btn.dataset.playing='false';
}
},false);

Answer 10

Peculiar_codes That's CORS error. You are trying to use a resource that have restricted access. That's a server thing. Use something more public. Try one of these https://www.kozco.com/tech/soundtests.html

Answer 11

ODLNT THANKS

Answer 12

The URL you are using as the source for audio should start with https not http.

Answer 13

On my way

Answer 14

ODLNT IT still doesn't work well

Answer 15

Okay thanks
Should I just edit the url or look for another url with the http protocol?