javascript - 为什么我的 start() 和 stop() 方法不起作用？

Question

为什么我的 start() 和 stop() 方法不起作用？我无法暂停和播放音频，有人能看到我做的事情有什么问题吗？

在js fiddle 中$被替换为jQuery

所以继续这就是我的代码，我使用过:

            $('.play').click(function() {
                audioBufferSouceNode.start();   
            });

            $('.pause').click(function() {
                audioBufferSouceNode.stop();
            });

            $('.volumeMax').click(function() {
                audioBufferSouceNode.volume=1;
            });

            $('.volumestop').click(function() {
                audioBufferSouceNode.volume=0;
            });

            $('.playatTime').click(function() {
                audioBufferSouceNode.currentTime= 35;
                audioBufferSouceNode.play();
            });     

但由于某种原因它不起作用。这是我的index.php 页面。

           <div id="wrapper">
        <div id="fileWrapper" class="file_wrapper">
            <div id="info">
                HTML5 Audio API showcase | An Audio Viusalizer
            </div>
            <label for="uploadedFile">Drag&drop or select a file to play:</label>
            <input type="file" id="uploadedFile"></input>
        </div>
        <div id="visualizer_wrapper">
            <canvas id='canvas' width="800" height="350"></canvas>
        </div>
    </div>
    <footer>
    </footer>
   <div class="audioPlayer">  

        <button type="button" class="play">play</button>
        <button type="button" class="pause">pause</button>
        <button type="button" class="playatTime">play at 35 seconds</button>
        <button type="button" class="volumestop">Volume to 0</button>
        <button type="button" class="volumeMax">Volume open</button>

这是我的按钮在 javascript 文件中使用的地方，位于代码的第 134 行:https://jsfiddle.net/4hty6kak/16/

   _visualize: function(audioContext, buffer) {
    audioBufferSouceNode = audioContext.createBufferSource(),
        analyser = audioContext.createAnalyser(),
        that = this;
    //connect the source to the analyser
    audioBufferSouceNode.connect(analyser);

            jQuery('.play').click(function() {
                audioBufferSouceNode.start();   
            });

            jQuery('.pause').click(function() {
                audioBufferSouceNode.stop();
            });

            jQuery('.volumeMax').click(function() {
                audioBufferSouceNode.volume=1;
            });

            jQuery('.volumestop').click(function() {
            audioBufferSouceNode.volume=0;
            });

            jQuery('.playatTime').click(function() {
                audioBufferSouceNode.currentTime= 35;
                audioBufferSouceNode.play();
            }); 



    //connect the analyser to the destination(the speaker), or we won't hear the sound
    analyser.connect(audioContext.destination);
    //then assign the buffer to the buffer source node
    audioBufferSouceNode.buffer = buffer;
    //play the source
    if (!audioBufferSouceNode.start) {
        audioBufferSouceNode.start = audioBufferSouceNode.noteOn //in old browsers use noteOn method
        audioBufferSouceNode.stop = audioBufferSouceNode.noteOff //in old browsers use noteOn method
    };
    //stop the previous sound if any
    if (this.animationId !== null) {
        cancelAnimationFrame(this.animationId);
    }
    if (this.source !== null) {
        this.source.stop(0);
    }
    audioBufferSouceNode.start(0);
    this.status = 1;
    this.source = audioBufferSouceNode;
    audioBufferSouceNode.onended = function() {
        that._audioEnd(that);
    };
    this._updateInfo('Playing ' + this.fileName, false);
    this.info = 'Playing ' + this.fileName;
    document.getElementById('fileWrapper').style.opacity = 0.2;
    this._drawSpectrum(analyser);
 },

完整代码:

https://jsfiddle.net/4hty6kak/16/

我尝试过使用

audioBufferSouceNode.source.start(); 

&

audioBufferSouceNode.source.stop(); 

但是仍然不起作用! 你有什么解决办法？按照这个速度，我不在乎你有什么解决方案，即使它使用 jQuery。一些简单且容易修复的事情。

Answer 1

您只能在 audioBufferSourceNode 上使用 start 一次，并且通常对于 网络音频 API 的大多数源节点都只能使用一次。请参阅http://webaudio.github.io/web-audio-api/#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration

start may only be called one time

因此，如果您想要这些行为，您需要对逻辑进行相当多的更改，这意味着您必须在启动时重新创建节点。我制作了一个几乎无法工作的版本，它只是为了展示你如何工作，但正如我所说，如果你想让它工作，它需要对你的代码进行一些重要的重构。 但基本上，您应该有一个启动方法来创建音频节点并进行连接。在您的情况下， _visualize 不太远，因此在示例中我在开始时调用 _visualize 。但显然它会导致其他问题，例如点击事件。 您必须查看需要回收哪些对象，您可以保留一些(例如分析器)，但有些则不能，因此您还必须对其进行排序。

    _visualize: function (audioContext, buffer) {
        audioBufferSouceNode = audioContext.createBufferSource();


        that = this;
        //connect the source to the analyser
        audioBufferSouceNode.connect(analyser);

        jQuery('.play').click(function () {
            audioContext.decodeAudioData(fileResult, function (buffer) {
                that._updateInfo('Decode succussfully,start the visualizer', true);
                that._visualize(audioContext, buffer);
            }, function (e) {
                that._updateInfo('!Fail to decode the file', false);
                console.log(e);
            });

        });

https://jsfiddle.net/h3yvp0zw/4/

再说一次，这只是一个例子，它工作得不好，点击几次后，可视化工具会由于某种原因而下降，可能是点击事件太多。只是为了表明问题出在哪里。

编辑:

也许更好的方法是使用 mediaElementSourceNode 而不是 audioBufferSourceNode。 mediaElementSourceNode 允许将常规 HTML Audio Element 馈送到上下文中，从而应用效果和/或分析器。这允许使用 HTML Audio 元素 的常规控件，例如播放和暂停。

IT 就是这样工作的:

首先创建一个音频元素。

var audioElement = new Audio('sourcefile');

然后您的 mediaElementSource 引用您的元素:

var source = audioContext.createMediaElementSource(audioElement);

然后将其连接到您的分析仪:

source.connect(analyser);

并将您的行为应用到您的元素:

audioElement.play();
audioElement.pause();

等等

请注意，虽然音频元素可以处理跨域文件，但 mediaElementSource 却并非如此。安全性是不同的，如果您在音频元素上使用跨域文件，音频元素可能会播放，但是一旦您将其提供给 mediaSourceElement，它就会停止，它只会输出静音。

这意味着您需要修改文件的处理方式，您可能需要将它们放在服务器上，然后将路径提供给音频元素。