V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
unity0703
V2EX  ›  分享创造

用纯 JS 播放音乐(乐谱)

  •  4
     
  •   unity0703 ·
    ee0703 · 2014-11-03 22:27:25 +08:00 · 8426 次点击
    这是一个创建于 3432 天前的主题,其中的信息可能已经有所发展或是发生改变。
    花了半天时间写了个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/
    31 条回复    2014-11-07 19:13:24 +08:00
    lizheming
        1
    lizheming  
       2014-11-03 22:33:58 +08:00
    那些频率楼主是怎么知道的!!好强大!
    unity0703
        2
    unity0703  
    OP
       2014-11-03 22:36:36 +08:00
    @lizheming 有点基础乐理的人都知道啊,标准音(中音la)是440hz,一个八度频率翻倍,半音阶乘2的1/12次方(1.059463)
    est
        3
    est  
       2014-11-03 22:39:20 +08:00
    chrome v31表示没法工作。。。。。(我是老古董)
    zava
        4
    zava  
       2014-11-03 22:39:21 +08:00
    lz 好创意, 如果能模拟几种乐器, 那就可以整成一首歌了!
    14
        5
    14  
       2014-11-03 22:39:57 +08:00
    Coooooooooooool~
    lizheming
        6
    lizheming  
       2014-11-03 22:40:50 +08:00
    @unity0703 OwQ OK,以后我要自称音盲了T_T,哭瞎...
    unity0703
        7
    unity0703  
    OP
       2014-11-03 22:40:57 +08:00
    @est 应该是浏览器比较老,我的chrome版本 38.0.2125.111 测试没问题
    unity0703
        8
    unity0703  
    OP
       2014-11-03 22:45:14 +08:00
    @lizheming 知道点基础就行了,我乐理也不是很好,因为学过电子琴,所以略懂,其实音色才是真正复杂的地方...关于原理,可以看看我的文章 http://blog.maxee.info/2014/11/01/play-music-with-pure-js/
    MrMign
        9
    MrMign  
       2014-11-03 22:45:22 +08:00
    好流逼
    loooooost
        10
    loooooost  
       2014-11-03 22:47:05 +08:00   ❤️ 1
    都是audio啊 试试这个 http://watilde.github.io/beeplay/
    unity0703
        11
    unity0703  
    OP
       2014-11-03 22:51:59 +08:00
    @loooooost 这个音色好多了,其实模拟音色是最复杂的部分
    unity0703
        12
    unity0703  
    OP
       2014-11-03 22:58:55 +08:00
    @zava 好像已经有人实现了, https://github.com/meenie/band.js
    jakwings
        13
    jakwings  
       2014-11-03 22:59:23 +08:00   ❤️ 1
    好像 beeplay
    https://github.com/watilde/beeplay
    其实刚进来我以为是读乐谱图片……
    ETiV
        14
    ETiV  
       2014-11-03 23:07:00 +08:00   ❤️ 1
    http://mudcu.be/midi-js/

    LZ可以研究一下这个. 直接播 MIDI.
    SoloCompany
        15
    SoloCompany  
       2014-11-03 23:12:54 +08:00   ❤️ 1
    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
        16
    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
        17
    crs0910  
       2014-11-03 23:16:17 +08:00
    setTimeout 在切换到别的 Tab 时会....
    unity0703
        18
    unity0703  
    OP
       2014-11-03 23:16:38 +08:00
    @SoloCompany 呃,没有safari,我稍后测试一下
    ETiV
        19
    ETiV  
       2014-11-03 23:25:23 +08:00   ❤️ 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],['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
        20
    unity0703  
    OP
       2014-11-03 23:46:55 +08:00
    @ETiV 洋娃娃和小熊跳舞 (=@__@=)
    Arrowing
        21
    Arrowing  
       2014-11-04 09:18:12 +08:00
    注释提示中英文混合真的好么? 0.0
    openroc
        22
    openroc  
       2014-11-04 10:59:06 +08:00
    @unity0703 再接再厉,用canvas做个五线谱~,直接点,输入['C4',1]比较麻烦。:)
    fadequ
        23
    fadequ  
       2014-11-04 11:18:18 +08:00
    Safari 播放不了...
    樓主看過 soundslice.com
    逼哥的天空之城嗎?
    unity0703
        24
    unity0703  
    OP
       2014-11-05 12:23:08 +08:00
    @Arrowing 因为要写教程,所以大部分注释用中文的...平时注释都习惯用英文注释,因为切输入法太麻烦了
    unity0703
        25
    unity0703  
    OP
       2014-11-05 12:25:48 +08:00
    @openroc 嗯,我会加油的...不过图形,canvas什么的不太懂啊
    unity0703
        26
    unity0703  
    OP
       2014-11-05 12:31:07 +08:00
    @fadequ safari问题正在修复,不过最近比较忙,可能更新会比较慢...这个很像网页版GTP啊,李志的天空之城听过,舍友老吼这歌,他是乐队主唱: http://site.douban.com/judgementday/
    unity0703
        27
    unity0703  
    OP
       2014-11-05 12:36:26 +08:00
    最近忙成狗了,但是项目一定会坚持下去,我会慢慢修复和更新,回复慢了,对不起大家~~
    muziyue
        28
    muziyue  
       2014-11-06 09:47:10 +08:00
    赞赞赞,多整几种音乐能搞个乐队了
    muziyue
        29
    muziyue  
       2014-11-06 09:47:22 +08:00
    @muziyue 音色
    Culm
        30
    Culm  
       2014-11-06 13:10:55 +08:00
    kxscr
        31
    kxscr  
       2014-11-07 19:13:24 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4807 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 09:56 · PVG 17:56 · LAX 02:56 · JFK 05:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.