用纯 JS 播放音乐(乐谱)

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3664 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

Just 4 fun

第 1 条附言 · 2014-11-03 22:59:45 +08:00

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

音色

乐谱

JavaScript

31 条回复 • 2014-11-07 19:13:24 +08:00

lizheming

2014-11-03 22:33:58 +08:00

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

unity0703

2014-11-03 22:36:36 +08:00

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

est

2014-11-03 22:39:20 +08:00

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

zava

2014-11-03 22:39:21 +08:00

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

2014-11-03 22:39:57 +08:00

Coooooooooooool~

lizheming

2014-11-03 22:40:50 +08:00

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

unity0703

2014-11-03 22:40:57 +08:00

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

unity0703

2014-11-03 22:45:14 +08:00

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

MrMign

2014-11-03 22:45:22 +08:00

好流逼

loooooost

2014-11-03 22:47:05 +08:00

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

unity0703

2014-11-03 22:51:59 +08:00

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

unity0703

2014-11-03 22:58:55 +08:00

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

jakwings

2014-11-03 22:59:23 +08:00

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

ETiV

2014-11-03 23:07:00 +08:00

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

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

SoloCompany

2014-11-03 23:12:54 +08:00

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

2014-11-03 23:14:34 +08:00

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 这个好棒

crs0910

2014-11-03 23:16:17 +08:00

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

unity0703

2014-11-03 23:16:38 +08:00

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

ETiV

2014-11-03 23:25:23 +08:00

[
['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

2014-11-03 23:46:55 +08:00

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