javascript - 未捕获的TypeError : Cannot read property 'createMediaElementSource' of null

您好，我有一个项目JavaScript，它对我来说是新的，我使用音频Web API，该代码允许我播放音乐并使用相同的按钮停止，一切似乎都不错，但控制台显示此消息错误，请任何人都可以帮助我解决这个问题，如果您还有其他问题，请告诉我tnx。

那就是问题所在

这是我的代码:

 <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>

编辑:

在按照@chŝdk在以下答案中的建议编辑代码后，执行以下操作:

audioCtx= track.createMediaElementSource(audioElement);

我不断收到以下警告:

AE对这个问题有什么解决办法吗？

最佳答案

之所以出现此错误，是因为您尝试在此行中的createMediaElementSource变量null上调用audioCtx方法:

audioCtx= audioCtx.createMediaElementSource(audioElement);

从， AudioContext.createMediaElementSource() MDN reference，，我们可以看到应该在AudioContext实例上调用此方法，因此在您的代码中，您将需要在track变量上调用它。

因此，只需将上面的行更改为:

audioCtx= track.createMediaElementSource(audioElement);