大家都知道，HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式，但是有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持，因为mid文件并不像其他声音文件那样记录声音的采样信息，而是记录了乐器的演奏指令，二者的原理截然不同。 mid文件格式的最突出的有点是文件极小，几分钟的音乐可能只

　　

　　大家都知道，HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式，但是有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持，因为mid文件并不像其他声音文件那样记录声音的采样信息，而是记录了乐器的演奏指令，二者的原理截然不同。

　　mid文件格式的最突出的有点是文件极小，几分钟的音乐可能只有几K的文件大小，mp3等其他格式则至少要几M以上，所以midi在手机和web上有很大的优势，特别是适合做各种铃声，背景音乐。

　　标签已经过时了，很多浏览器都不再支持。

　　无论是标准组织，还是浏览器厂商，都主张使用来播放音频文件。

　　考虑到要求支持MIDI的广泛呼声，W3C有指定了一个Web MIDI API草案，但这个草案还非常新，浏览器还没有支持。

　　为了让midi在html5 audio上播放出来，需要动用Javascript 来处理。

　　我这里推荐3个非常好的Javascript实现的audio播放midi:

　　MIDI.js - Sequencing in Javascript.

　　这是一个js库，封装了一些接口方便web开发者调用播放mid音乐文件。

　　

　　Color Piano V2

　　这是一个彩色钢琴，你可以手动弹奏，也可以自动弹奏动态加载的mid文件。

　　

　　Audiotool

　　这是一个强大的电子音乐合成工具了，没有一点器乐知识的话，可能基本不懂用了，比如我。

　　

　　本文来自cuixiping的博客，原文地址：http://blog.csdn.net/cuixiping/article/details/7826138

　　 

HTML5 Audio时代的MIDI音乐文件播放的更多相关文章

  1. Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

  2. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  3. iOS开发--音乐文件播放工具类的封装(包含了音效的封装)

    一.头文件 #import <Foundation/Foundation.h> #import <AVFoundation/AVFoundation.h> @interface ...

  4. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. MUI音乐播放html5+audio模块

    html5+ audio 模块MUI播放音频 Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件.通过plus.audio获取音频管理 ...

  6. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  7. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

  8. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  9. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

随机推荐

  1. 序列化与反序列化 - BinaryFormatter二进制(.dat)、SoapFormatter(.soap)、XmlSerializer(.xml)

    序列化的作用是什么?为什么要序列化? 1.在进程下次启动时读取上次保存的对象的信息. 2.在不同的应用程序域或进程之间传递数据. 3.在分布式应用程序中的各应用程序之间传输对象. 所为序列化,就是将对 ...

  2. 国际化标签 <fmt:bundle>&<fmt:message>的使用

    国际化标签 <fmt:bundle>&<fmt:message>的使用 Message.properties文件: name=www.gis520.com #info= ...

  3. Class对象

    (一) 获得Class对象的四种方式 第1种方法:Object.getClass() 第2种方法:.class语法 第3种方法:Class.forName() 第4种方法:包装类的TYPE域 impo ...

  4. IsDbNull 方法的用法

    本文来自:http://lazhgg.cnblogs.com/archive/2006/02/21/334915.html 在c#中,进行数据库查询时使用IsDbNull 方法判断数据库中字段值是否存 ...

  5. 谱聚类--SpectralClustering

    谱聚类通常会先对两两样本间求相似度. 然后依据相似度矩阵求出拉普拉斯矩阵,然后将每一个样本映射到拉普拉斯矩阵特诊向量中,最后使用k-means聚类. scikit-learn开源包中已经有现成的接口能 ...

  6. static静态属性和静态方法的原理与调用技巧

    这篇文章主要介绍了php面向对象中static静态属性和静态方法的调用,实例分析了static静态属性和静态方法的原理与调用技巧,需要的朋友可以参考下     本文实例讲述了php中static静态属 ...

  7. linux配置yum源

    yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...

  8. 获取系统的IP

    如何获取Linux系统的ip.当时一直用这种方法获取IP的. ifconfig|grep 'Bcast'|awk -F ':' '{print $2}'|awk '{print $1}' 今天偶然发现 ...

  9. 配置基于NotePad++工具下的C#开发环境

    1.打开NotePad++,打开Notepad++的插件(plugins)菜单-->Plugin Manager-->Show Plugin Manager-->勾选NppExec- ...

  10. 谈谈javascript的函数表达式及其应用

    我们都知道定义函数的方式有两种,一种是函数声明,另外一种就是函数表达式. 函数声明 语法为:function关键字后跟函数名.例如: function functionName(arg0) { //函 ...