HTML5 Web Audio API实现【董小姐】播放

论坛有人发了matlab实现的董小姐，于是想在自己熟悉的领域也试试看。之前用Python做过发出指定频率的声音，但是这个对第三方库的依赖较大。于是准备在JavaScript中实现。

先发一个不错的参考资料：http://www.html5rocks.com/zh/tutorials/webaudio/intro/

首先需要处理Web Audio API名称的问题，并取得AudioContext的实例：

try {// Fix up for prefixingwindow.AudioContext = window.AudioContext || window.webkitAudioContext;context = new AudioContext();
} catch (e) {alert('Web Audio API is not supported in this browser. Chrome is strongly recommended!');
}

目前对Web Audio的支持，Chrome做的最好，Firefox正在努力，测试版已经实现，IE大家都明白，还不支持。

然后是声音的来源，我选择了MIDI.js中的钢琴声音，引入这个js文件，里面是base64编码后的钢琴各个按键的声音。对编码解码需要用到base64binary.js。用上面取得的context做音频解码。解码后回调函数中，将AudioBuffer存到数组中。这里MIDI.keyToNote是做钢琴按键到数字的转换。

var base64 = notes[key].split(',')[1];
var data = Base64Binary.decodeArrayBuffer(base64);
(function(note) {total ++;context.decodeAudioData(data, function(buffer) {MIDI.soundBuffer[type][note] = buffer;// trigger event;count ++;if(count == total)triggerEvent(document, "midi:init");})
})(MIDI.keyToNote[key]); 

得到董小姐的曲谱后，将音符放到数组中。播放的时候从数组依次取出播放。播放的代码如下：

  MIDI.playSound = function(note, time) {if(callback)setTimeout(callback, time * 1000);if(note == null || note < MIDI.pianoKeyOffset )return;var buffer = instrument[note];var source = context.createBufferSource(); source.buffer = buffer; source.connect(context.destination); source.start(time);}
其中context.destination指的是音频输出设备。
捎带花了点时间做了歌词播放同步标记，Chrome的timer很准确啊，一首歌下来，音频播放和歌词看不出不同步。
项目代码上传到GitHub：https://github.com/JohnWong/midi-javascript.git
演示地址：http://impress.sinaapp.com/midi-javascript/missdong.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！