在AUDIO和音高上播放

时间:2012-01-25 04:28:11

标签: javascript html5 html5-audio pitch-shifting

一点点背景:
人们喜欢游戏 人们使用互联网 互联网需要游戏 游戏使用声音 HTML5有<audio>

好的,到目前为止一切都很好。

最近我发现 - 令我惊讶的是 - IE9实际上支持playbackRate。我急切地尝试了一下。更令人惊讶的是,它确实奏效了。我在Chrome中尝试过相同的功能,当它设置为0.5时,它的功能非常棒。我已经放弃了Firefox,因为它不支持MP3。

继续,这是我的问题:IE和Chrome都会在更改playbackRate时应用音高修正。 IE做得很好,Chrome做得很糟糕。无论哪种方式,我都不希望这样,我 想要 改变音调的声音。有了这种力量,我可以删除650个文件,我必须在程序上生成一个备用音高,并且我的项目将拥有更多的自由。哎呀,如果我真的想,我甚至可以在HTML5中创建一个MOD轨道播放器(减去效果频道)。

那么,HTML5规范中是否有任何内容可以让我关闭音高修正,并且只是让声音被播放,好像样本实际上被挤压在一起被挤压在一起?

3 个答案:

答案 0 :(得分:6)

Chrome目前支持Web音频API(http://www.w3.org/TR/webaudio/),它具有您可以设置的playbackRate audioParam。它不像<audio>标签那么简单,但允许各种很酷的东西。我目前正在使用它来进行音高变换/时间拉伸失真。

以下是您可以做的一个示例:

    //build a request and fire it off
    speedChanger.loader = (function(){

      var _request       = new XMLHttpRequest(),

          _handleRequest = function(url){
            _request.open('GET',url,true);
            _request.responseType = 'arraybuffer';
            _request.onload = function(){
              SpeedChanger.audioGraph.context.decodeAudioData(_request.response, function(buffer){
                _loadedBuffer = buffer;
                SpeedChanger.audioGraph.setBuffer(buffer);
                SpeedChanger.audioGraph.setBufferCache(buffer);

              },function(){//error stuff});
            };
            _request.send();
          };

      _handleRequest("audio/file.mp3");

  }());//loader

  grainTable.audioGraph = (function(){
    var _context = new webkitAudioContext(),         //this is the container for your entire audio graph
        _source = _context.createBufferSource(),     //your buffer will sit here
        _bufferCache,                                //buffer needs to be re-initialized before every play, so we'll cache what we've loaded here

        //for chaching / retrieving the buffer
        _getBufferCache = function(){
          return _bufferCache;  
        },
        _setBufferCache = function(_sound){
          _bufferCache = _sound;
        },

        //for setting the current instance of the buffer 
        _setBuffer = function(_sound){
          _source.buffer = _sound;
        },

        _setPlaybackRate = function(rate){
          _source.playbackRate.value = rate;
        },

        _setRate = function(myRate){
            _rate = myRate;
        }

        //play it
        _playSound = function(){

          _source.noteOff(0);                       //call noteOff to stop any instance already playing before we play ours

          _source = _context.createBufferSource();  //init the source
          _setBuffer(_bufferCache);                 //re-set the buffer

          _setPlaybackRate(_rate);                  //here's your playBackRate check

          _source.connect(_context.destination);    //connect to the speakers 
          _source.noteOn(0);                        //pass in 0 to play immediately
        },

}

    return{

      context        :_context,
      setBuffer      :_setBuffer,
      setBufferCache :_setBufferCache,
      playSound      :_playSound,
      setRate        :_setRate

    }

  }());//audioGraph

答案 1 :(得分:5)

来自Mozilla bug tracker issue on implementing playbackRate

  

WebKit通过导出附加(前缀)属性来解决此问题   “preservesPitch”(在这里向WhatWG提出:   http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-July/021100.html

据推测,您可以将preservesPitch(webkit的WebkitPreservesPitch)设置为false,以至少关闭Webkit中的此功能。我不熟悉此属性的其他浏览器支持。

答案 2 :(得分:0)

不,HTML5规范中当前没有任何内容允许您对音频进行微调。

但是

当你通过决定放弃Firefox来限制自己时,为什么关心“权力”和“项目自由”?顺便说一句,Opera也不支持MP3。

除非当然这是个人项目,除了你自己之外没有人会使用它,因此这是一个没有实际意义的点。在这种情况下,如果您想要定位Chrome,可以查看可能包含您想要的Web Audio API