# MidiPlayer
A javascript class to play MIDI music directly, without plugin.
By: X. Chen
Created on: 4/1/2015
Last Modified: 4/3/2015
Github site: <a href="https://github.com/chenx/MidiPlayer">https://github.com/chenx/MidiPlayer</a>
About
---------
MIDI is a widely used music format online. However the HTML5 Audio tag supports only wav/mp3/ogg formats so far. Playing MIDI usually uses the <i>embed</i> tag which requires the QuickTime plugin, or deprecated tag such as <i>bgsound</i> in IE, but not always work.
The MidiPlayer javascript class is used to play MIDI, without any plugin. It requires a HTML5 browser: firefox, chrome, safari, opera. IE9+ may work but not tested. Firefox works the best, followed by Chrome, Safari and Opera.
Demo
-----
<a href="http://homecox.com/games/midi/">See demo here</a>.
Usage
-----
You just need to include <a href="https://github.com/chenx/MidiPlayer/tree/master/javascript">midi.min.js</a> (uncompressed version: <a href="https://github.com/chenx/MidiPlayer/blob/master/javascript/midi.js">midi.js</a>) in the head section of your html page:
<script src="javascript/midi.min.js"></script>
An alternative is to include all the files from which midi.js was made (Of course, the first way is much better):
<script src="javascript/midi/stream.js"></script>
<script src="javascript/midi/midifile.js"></script>
<script src="javascript/midi/replayer.js"></script>
<script src="javascript/midi/synth.js"></script>
<script src="javascript/midi/audio.js"></script>
<script src="javascript/midi/vbscript.js"></script>
<script src="javascript/midi/MidiPlayer.js"></script>
You also need to include da.swf in the same directory as your html file. This is needed by Safari and Opera.
For the rest, check the html source of the demo above. It's just a few lines of javascript.
Features
---------
* Can specify these in constructor parameter list: midi, target, loop, maxLoop, end_callback.
- midi: MIDI file path.
- target: Target html element that this MIDI player is attached to.
- loop: Optinoal. Whether loop the play. Value is true/false, default is false.
- maxLoop: Optional. max number of loops to play when loop is true. Negative or 0 means infinite. Default is 1.
- end_callback: Optional. Callback function when MIDI ends.
e.g., use this to reset target button value from "stop" back to "play".
* can specify a debug div, to display debug message: setDebugDiv(debug_div_id).
* Start/stop MIDI by: start(), stop().
* If a MIDI started play, call start() again will stop and then restart from beginning.
This depends on other 5 javascript files (audio.js, midifile.js, replayer.js, stream.js, synth.js) from [2][3], which is a demo of [1]. This is related to [4].
The disadvantage of [2][3] is that it does not have control over how a MIDI file is played: when clicking on the link more than once the file will be started multiple times and sounds chaotic; and there is no loop feature. Both are well handled by MidiPlayer.js here.
Another midi player javascript is in [5], but it cannot play multiple MIDI files at the same time, cannot play a MIDI file automatically after loading the page, and has no loop feature. All are handled by MidiPlayer.js here.
It can be a good idea to add MIDI support to HTML5 Audio tag, because MIDI files have much smaller size than wav/mp3, and the sound effects are very rich. Besides there is a large repertoire of MIDI music online.
To-Do
-----
IE support, like how [5] does.
References
----------
[1] http://matt.west.co.tt/music/jasmid-midi-synthesis-with-javascript-and-html5-audio/
[2] http://jsspeccy.zxdemo.org/jasmid/
[3] https://github.com/gasman/jasmid
[4] <a href="http://mudcu.be/midi-js/">MIDI.js - Sequencing in Javascript.</a>
[5] <a href="http://www.midijs.net/">MIDI.js - The 100% JavaScript MIDI Player using W3C Web Audio</a>
[6] <a href="http://sergimansilla.com/blog/dinamically-generating-midi-in-javascript/">Dynamically generating MIDI in JavaScript</a>
没有合适的资源?快使用搜索试试~ 我知道了~
MidiPlayer:直接播放 MIDI 音乐的 javascript 类,无需插件
共15个文件
js:9个
mid:2个
swf:1个
需积分: 15 4 下载量 49 浏览量
2021-06-13
20:05:37
上传
评论
收藏 35KB ZIP 举报
温馨提示
播放器 直接播放 MIDI 音乐的 javascript 类,无需插件。 作者:X. Chen 创建于:2015/4/1 最后修改时间:2015 年 4 月 3 日Github 网站: 关于 MIDI 是一种广泛使用的在线音乐格式。 然而,HTML5 Audio 标签目前只支持 wav/mp3/ogg 格式。 播放 MIDI 通常使用需要 QuickTime 插件的embed标签,或不推荐使用的标签,例如 IE 中的bgsound ,但并不总是有效。 MidiPlayer javascript 类用于播放 MIDI,没有任何插件。 它需要 HTML5 浏览器:firefox、chrome、safari、opera。 IE9+ 可能工作但未测试。 Firefox 效果最好,其次是 Chrome、Safari 和 Opera。 演示 。 用法 您只需要在 html 页面的 head 部分
资源详情
资源评论
资源推荐
收起资源包目录
MidiPlayer-master.zip (15个子文件)
MidiPlayer-master
README.md 4KB
Bach_Badinerie.mid 18KB
da.swf 1KB
common.css 1KB
javascript
midi.js 40KB
midi.min.js 12KB
midi
audio.js 6KB
stream.js 2KB
MidiPlayer.js 7KB
vbscript.js 718B
replayer.js 6KB
synth.js 5KB
midifile.js 10KB
Saved.mid 260B
index.html 6KB
共 15 条
- 1
乘风破浪的海伦
- 粉丝: 28
- 资源: 4546
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0