HTML5 Web Audio API实现【董小姐】播放
来源：互联网 发布：会议记录软件 编辑：程序博客网 时间：2024/04/27 14:16
论坛有人发了matlab实现的董小姐，于是想在自己熟悉的领域也试试看。之前用Python做过发出指定频率的声音，但是这个对第三方库的依赖较大。于是准备在JavaScript中实现。
先发一个不错的参考资料：http://www.html5rocks.com/zh/tutorials/webaudio/intro/
首先需要处理Web Audio API名称的问题，并取得AudioContext的实例：
try { // Fix up for prefixing window.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
- HTML5 Web Audio API实现【董小姐】播放
- HTML5 Web Audio Api 声音登陆
- HTML5 Web Audio Api (额外)https配置
- Html5 audio标签实现音乐播放
- 使用Audio API设计绚丽的HTML5音乐播放器
- 使用HTML5的Audio标签打造WEB音频播放器
- HTML5 Audio API
- HTML5 Web Audio Api－2 发声oscillator
- HTML5 Web Audio Api－3 可视化声音
- HTML5 ——web audio API 音乐可视化(二)
- HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器
- HTML5 Audio自定义播放控制
- 自定义HTML5 audio 播放器
- HTML5 Video/Audio播放本地文件
- html5，audio音乐播放器
- html5，audio音乐播放器
- html5 audio 自定义播放器
- HTML5 - 使用<audio>播放音频
- 10 - Longest Common Prefix
- js baidu插件实现网页分享功能
- 123
- Android入门：增删改查通讯录
- Centos安装apache
- HTML5 Web Audio API实现【董小姐】播放
- 特征描述子和特征匹配-SIFT
- IBM DB2 数据导出为EXCEL
- 事件处理之二：点击事件监听器的五种写法
- CRC-32的C代码
- EXPLAIN 语法（得到SELECT 的相关信息）
- input event types code
- ios tableView那些事 (十八) UITableView单行刷新数据
- windows 程序设计 Dll的使用
