用纯 JS 播放音乐(乐谱)

爱意满满的作品展示区。

This topic created in 4211 days ago, the information mentioned may be changed or developed.

花了半天时间写了个javascript乐谱播放器（不支持IE）：
http://blog.maxee.info/simplesheetmusic/example_cn.html

目前音色不太好(今天改进了一下已经好多了)，正在考虑加入钢琴音色和和弦的支持(对音色合成没有一点概念，头疼啊 -_-|||)

水平有限，只是为了好玩，欢迎吐槽

Just 4 fun

Supplement 1 · Nov 3, 2014

关于原理可以看看这个：http://blog.maxee.info/2014/11/01/play-music-with-pure-js/

音色

乐谱

JavaScript

31 replies • 2014-11-07 19:13:24 +08:00

lizheming

Nov 3, 2014

那些频率楼主是怎么知道的！！好强大！

unity0703

Nov 3, 2014

@lizheming 有点基础乐理的人都知道啊，标准音(中音la)是440hz，一个八度频率翻倍，半音阶乘2的1/12次方(1.059463)

est

Nov 3, 2014

chrome v31表示没法工作。。。。。（我是老古董）

zava

Nov 3, 2014

lz 好创意, 如果能模拟几种乐器, 那就可以整成一首歌了!

Nov 3, 2014

Coooooooooooool~

lizheming

Nov 3, 2014

@unity0703 OwQ OK，以后我要自称音盲了T_T，哭瞎...

unity0703

Nov 3, 2014

@est 应该是浏览器比较老，我的chrome版本 38.0.2125.111 测试没问题

unity0703

Nov 3, 2014

@lizheming 知道点基础就行了，我乐理也不是很好，因为学过电子琴，所以略懂，其实音色才是真正复杂的地方...关于原理，可以看看我的文章 http://blog.maxee.info/2014/11/01/play-music-with-pure-js/

MrMign

Nov 3, 2014

好流逼

loooooost

Nov 3, 2014

都是audio啊试试这个 http://watilde.github.io/beeplay/

unity0703

Nov 3, 2014

@loooooost 这个音色好多了，其实模拟音色是最复杂的部分

unity0703

Nov 3, 2014

@zava 好像已经有人实现了， https://github.com/meenie/band.js

jakwings

Nov 3, 2014

好像 beeplay
https://github.com/watilde/beeplay
其实刚进来我以为是读乐谱图片……

ETiV

Nov 3, 2014

http://mudcu.be/midi-js/

LZ可以研究一下这个. 直接播 MIDI.

SoloCompany

Nov 3, 2014

safari 也没兼容

[Error] TypeError: Not enough arguments
start (simpleSheetMusic.js, line 193)
start (simpleSheetMusic.js, line 193)
addtunecolor (simpleSheetMusic.js, line 216)
（匿名函数） (simpleSheetMusic.js, line 267)
play_sheet_music (simpleSheetMusic.js, line 277)
play (simpleSheetMusic.js, line 287)
play_notes (example_cn.html, line 20)
demo_func3 (example_cn.html, line 48)
onclick (example_cn.html, line 115)

wsph123

Nov 3, 2014

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/600.1.17 (KHTML, like Gecko) Version/7.1 Safari/537.85.10

Safari 不能播放， Chrome 没问题 OAQ 这个好棒

catoncat

Nov 3, 2014

setTimeout 在切换到别的 Tab 时会....

unity0703

Nov 3, 2014

@SoloCompany 呃，没有safari，我稍后测试一下

ETiV

Nov 3, 2014

[
['C4',1],['D4',1],['E4',1],['F4',1],
['G4',1],['G4',1],['G4',0.5],['F4',0.5],['E4',0.5],['0',0.5],
['F4',1],['F4',1],['F4',0.5],['E4',0.5],['D4',0.5],['0',0.5],
['C4',1],['E4',1],['G4',1],['0',1],
['C4',1],['D4',1],['E4',1],['F4',1],
['G4',1],['G4',1],['G4',0.5],['F4',0.5],['E4',0.5],['0',0.5],
['F4',1],['F4',1],['F4',0.5],['E4',0.5],['D4',0.5],['0',0.5],
['C4',1],['E4',1],['C4',1],['0',1],
['A4',1],['A4',1],['A4',0.5],['G4',0.5],['F4',0.5],['0',0.5],
['G4',1],['G4',1],['G4',0.5],['F4',0.5],['E4',0.5],['0',0.5],
['F4',1],['F4',1],['F4',0.5],['E4',0.5],['D4',0.5],['0',0.5],
['C4',1],['E4',1],['G4',1],['0',1],
['A4',1],['A4',1],['A4',0.5],['G4',0.5],['F4',0.5],['0',0.5],
['G4',1],['G4',1],['G4',0.5],['F4',0.5],['E4',0.5],['0',0.5],
['F4',1],['F4',1],['F4',0.5],['E4',0.5],['D4',0.5],['0',0.5],
['C4',1],['E4',1],['C4',1],['0',1]
]

来段谱子...最简单的...

unity0703

Nov 3, 2014

@ETiV 洋娃娃和小熊跳舞 (=@__@=)