Menu
Hello I have a project javaScript and it's new for me, I work with the audio web API, the code allows me to play music and stop with the same button all seems good but the console displays this message error please anyone can help me to solve this problem and if you have another problem please tell me tnx.
that is the problem
(Uncaught TypeError: Cannot read property 'createMediaElementSource' of null at HTMLButtonElement. (h1.html?_ijt=o00si3cs9lv3ovov0so3fv3a4h:33) (anonymous) @ h1.html?_ijt=o00si3cs9lv3ovov0so3fv3a4h:33).
this is my code:
<html>
<body>
<section class="tape">
<audio src="outfoxing.mp3" crossorigin="anonymous" ></audio>
<!-- type="audio/mpeg" -->
<button data-playing="false" class="tape-controls-play" role="switch" aria-checked="false">
<span>Play/Pause</span>
</button>
</section>
<script>
const AudioContext = window.AudioContext;
let audioCtx = null;
//play video
let playButton = document.querySelector('.tape-controls-play');
let audioElement =null ;
playButton.addEventListener('click', function() {
let track= new AudioContext();
audioElement = document.querySelector('audio');
audioCtx= audioCtx.createMediaElementSource(audioElement);
// check if context is in suspended state (autoplay policy)
if (audioCtx.state === 'suspended') {
audioCtx.resume();
}
if (this.dataset.playing === 'false') {
audioElement.play();
this.dataset.playing = 'true';
// if track is playing pause it
} else if (this.dataset.playing === 'true') {
audioElement.pause();
this.dataset.playing = 'false';
}
let state = this.getAttribute('aria-checked') === "true" ;
this.setAttribute( 'aria-checked', state ? "false" : "true" );
// connect our graph
audioElement.addEventListener('ended', () => {
playButton.dataset.playing = 'false';
playButton.setAttribute( "aria-checked", "false" );
track.connect(audioCtx.destination);
}, false);
}, false);
</script>
</body>
</html>
EDIT :
After editing the code, as suggested by @chŝdk in the answer below, to:
audioCtx= track.createMediaElementSource(audioElement);
I keep getting the following Warning:
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
Ae there any solutions for this issue?
577
You are getting this error because you are trying to call createMediaElementSource method on a null variable audioCtx in this line:
audioCtx= audioCtx.createMediaElementSource(audioElement);
From the AudioContext.createMediaElementSource() MDN reference, we can see that this method should be called on a AudioContext instance, so in your code you will need to call it on track variable instead.
So just change the above line to:
audioCtx= track.createMediaElementSource(audioElement);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
