Question

我经常读到，使用Web Audio API暂停/恢复音频文件是不可能的但现在我看到example，他们实际上可以暂停和恢复它。我试图弄清楚他们是怎么做到的。我想也许source.looping = false是关键，但事实并非如此现在我的音频总是从一开始就重新播放。

这是我目前的代码

var context = new (window.AudioContext || window.webkitAudioContext)();

function AudioPlayer() {
  this.source = context.createBufferSource();
  this.analyser = context.createAnalyser();
  this.stopped = true;
}

AudioPlayer.prototype.setBuffer = function(buffer) {
  this.source.buffer = buffer;
  this.source.looping = false;
};

AudioPlayer.prototype.play = function() {
  this.source.connect(this.analyser);
  this.analyser.connect(context.destination);

  this.source.noteOn(0);
  this.stopped = false;
};

AudioPlayer.prototype.stop = function() {
  this.analyser.disconnect();
  this.source.disconnect();
  this.stopped = true;
};

有人知道该怎么做才能让它发挥作用吗？

Answer 1

Oskar的回答和ayke的评论非常有帮助，但我错过了一个代码示例。所以我写了一篇：http://jsfiddle.net/v3syS/2/我希望它有所帮助。

var url = 'http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3';

var ctx = new webkitAudioContext();
var buffer;
var sourceNode;

var startedAt;
var pausedAt;
var paused;

function load(url) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = function() {
        ctx.decodeAudioData(request.response, onBufferLoad, onBufferError);
    };
    request.send();
};

function play() {
    sourceNode = ctx.createBufferSource();
    sourceNode.connect(ctx.destination);
    sourceNode.buffer = buffer;
    paused = false;

    if (pausedAt) {
        startedAt = Date.now() - pausedAt;
        sourceNode.start(0, pausedAt / 1000);
    }
    else {
        startedAt = Date.now();
        sourceNode.start(0);
    }
};

function stop() {
    sourceNode.stop(0);
    pausedAt = Date.now() - startedAt;
    paused = true;
};

function onBufferLoad(b) {
    buffer = b;
    play();
};

function onBufferError(e) {
    console.log('onBufferError', e);
};

document.getElementById("toggle").onclick = function() {
    if (paused) play();
    else stop();
};

load(url);

Answer 2

在目前的浏览器（Chrome 43，Firefox 40）中，现在可以为AudioContext提供“暂停”和“恢复”方法：

var audioCtx = new AudioContext();
susresBtn.onclick = function() {
  if(audioCtx.state === 'running') {
    audioCtx.suspend().then(function() {
      susresBtn.textContent = 'Resume context';
    });
  } else if(audioCtx.state === 'suspended') {
    audioCtx.resume().then(function() {
      susresBtn.textContent = 'Suspend context';
    });  
  }
}

（来自https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/suspend的修改示例代码）

Answer 3

不花时间检查你的例子的来源，我会说你想要使用AudioBufferSourceNode（https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#methodsandparams-AudioBufferSourceNode）的noteGrainOn方法

只需跟踪调用noteOff时缓冲区的距离，然后在新的AudioBufferSourceNode上恢复时从那里执行noteGrainOn。

这有意义吗？

编辑： ~~请参阅下面的评论，了解更新的API调用。~~

EDIT 2，2019：请参阅MDN以获取更新的API调用; https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start

Answer 4

实际上，网络音频API可以为您执行暂停和播放任务。它知道音频上下文的当前状态（运行或暂停），因此您可以通过以下简单方式执行此操作：

susresBtn.onclick = function() {
  if(audioCtx.state === 'running') {
    audioCtx.suspend()
  } else if(audioCtx.state === 'suspended') {
    audioCtx.resume()  
  }
}

我希望这可以提供帮助。

Answer 5

对于chrome修复程序，每次您要播放声音时，请将其设置为：

if(audioCtx.state === 'suspended') {
    audioCtx.resume().then(function() {
      audio.play();
   });  
}else{
     audio.play();
}

Answer 6

WebAudio API中缺少内置暂停功能似乎是对我的一个主要疏忽。可能，将来可以使用计划中的MediaElementSource执行此操作，这将允许您将一个元素（支持暂停）连接到Web Audio。目前，大多数解决方法似乎都是基于记住播放时间（如imbrizi的答案中所述）。这种解决方法在循环声音时有问题（实现循环是否无间隙？），以及允许动态更改声音的playbackRate（因为两者都影响时序）。另一个，同样hack-ish和技术上不正确，但你可以使用的更简单的解决方法是：

source.playbackRate = paused?0.0000001:1;

不幸的是，0不是playbackRate的有效值（实际上会暂停声音）。然而，出于许多实际目的，一些非常低的值，如0.000001，足够接近，它不会产生任何声音输出。

Answer 7

更新：此功能仅适用于Chrome。 Firefox（v29）尚未实现MediaElementAudioSourceNode.mediaElement属性。

假设您已经拥有AudioContext引用和媒体源（例如通过AudioContext.createMediaElementSource()方法调用），您可以在源上调用MediaElement.play()和MediaElement.pause()，例如

source.mediaElement.pause();
source.mediaElement.play();

不需要黑客和变通方法，它是受支持的。如果您使用<audio>标记作为源代码，则不应直接在JavaScript中的音频元素上调用暂停，这将停止播放。

Answer 8

2017年，使用ctx.currentTime可以很好地跟踪歌曲中的点。下面的代码使用一个按钮（songStartPause）在播放和播放之间切换。暂停按钮。为简单起见，我使用全局变量。变量musicStartPoint会记录您在歌曲中的播放时间。音乐api以秒为单位记录时间。

将您的初始musicStartPoint设置为0（歌曲开头）

var ctx = new webkitAudioContext();
var buff, src;
var musicLoaded = false;
var musicStartPoint = 0;
var songOnTime, songEndTime;
var songOn = false;

songStartPause.onclick = function() {

  if(!songOn) {
    if(!musicLoaded) {
      loadAndPlay();
      musicLoaded = true;
    } else {
      play();
    }

    songOn = true;
    songStartPause.innerHTML = "||"  //a fancy Pause symbol

  } else {
    songOn = false;
    src.stop();
    setPausePoint();
    songStartPause.innerHTML = ">"  //a fancy Play symbol
  }
}

使用ctx.currentTime减去歌曲开始时的结束时间，并将这段时间追加到歌曲最初的位置。

function setPausePoint() {
  songEndTime = ctx.currentTime;
  musicStartPoint += (songEndTime - songOnTime);
}

加载/播放功能。

function loadAndPlay() {
  var req = new XMLHttpRequest();
  req.open("GET", "//mymusic.com/unity.mp3")
  req.responseType = "arraybuffer";
  req.onload = function() {
    ctx.decodeAudioData(req.response, function(buffer) {
      buff = buffer;
      play();
    })
  }
  req.send();
}

function createBuffer() {
      src = ctx.createBufferSource();
      src.buffer = buff;
    }


function connectNodes() {  
  src.connect(ctx.destination); 
}

最后，播放功能告诉歌曲从指定的musicStartPoint开始（并立即播放），并设置songOnTime变量。

function play(){
  createBuffer() 
  connectNodes();
  songOnTime = ctx.currentTime;
  src.start(0, musicStartPoint);
}

*旁注：我知道在click函数中设置songOnTime可能看起来更干净，但我认为抓住时间码尽可能接近src.start是有意义的，就像我们如何抓住暂停时间一样尽可能接近src.stop。

Answer 9

我没有听完完整的讨论，但我会很快的。我只是简单地通过HAL演示进行了了解。对于那些现在喜欢我的人，我想告诉 1-如何使此代码现在起作用。 2-从此代码获得暂停/播放的技巧。

1：将noteOn（xx）替换为start（xx）并将任何有效的URL放入sound.load（）中。我想这就是我所做的一切。您将在控制台中收到一些漂亮的指令错误。跟着他们。是否：有时您可以忽略它们，但现在可以使用：它与某些功能中的-webkit前缀相关。给出了新的。 2：在某个时候，当它起作用时，您可能想暂停声音。它会工作。但是，众所周知，在比赛中施加新的压力会引发错误。结果，错误source_.start（0）之后的this.play（）中的代码将不会执行。我只是将这些行括在try / catch中：

      this.play = function() {
    analyser_ = context_.createAnalyser();

    // Connect the processing graph: source -> analyser -> destination
    source_.connect(analyser_);
    analyser_.connect(context_.destination);
  try{
    source_.start(0);
  }
  catch(e){
    this.playing = true;

    (function callback(time) {
      processAudio_(time);
      reqId_ = window.webkitRequestAnimationFrame(callback);
    })();
  }

它有效：您可以使用播放/暂停。我想提一下，HAL simulation真是不可思议。遵循那些简单的步骤，值得！

Web Audio API从暂停状态恢复

9 个答案: