未捕获的TypeError：无法读取null的属性'createMediaElementSource'

Question

未捕获的TypeError：无法读取null的属性'createMediaElementSource'

ihe*_*oui 5 html javascript web-audio-api

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

那就是问题所在

（未捕获的TypeError：无法读取HTMLButtonElement处的null属性'createMediaElementSource'。（h1.html？_ijt = o00si3cs9lv3ovov0so3fv3a4h：33）（匿名）@ h1.html？_ijt = o00si3cs9lv3ovov0so3fv3a4h：33）。

这是我的代码：

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

Run Code Online (Sandbox Code Playgroud)

编辑：

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

audioCtx= track.createMediaElementSource(audioElement);

Run Code Online (Sandbox Code Playgroud)

我不断收到以下警告：

AudioContext不允许启动。用户在页面上进行手势操作后，必须恢复（或创建）它

AE有什么解决办法吗？

Answer 1

cнŝ*_*ŝdk 2

您收到此错误是因为您尝试调用此行中变量的createMediaElementSource方法：nullaudioCtx

audioCtx= audioCtx.createMediaElementSource(audioElement);

Run Code Online (Sandbox Code Playgroud)

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

所以只需将上面的行更改为：

audioCtx= track.createMediaElementSource(audioElement);

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，6 月前
查看次数：	707 次
最近记录：	7 年，5 月前