Greg Jopa，伊利诺伊州立大学网页开发专业的研究生，使用 Firefox 的 音频数据 API 和 Vexflow (HTML5 音乐记谱渲染 API) 构建了一个基于网络的吉他谱播放器。以下是 Greg 的一些详细信息。你也可以在 他的博客 上阅读有关此实验的更多信息。

我使用 Firefox 4 的 音频数据 API、MusicXML 和 Vexflow 创建了一个 HTML 5 吉他谱播放器。

这是一个 YouTube 视频。如果你 在这里启用，它将使用 HTML5 的 <video> 标签。

• 查看演示.

• 源代码.

使用 JavaScript，这个吉他谱播放器将来自 MusicXML 文件的音乐音符数据转换为音频数据 API 可播放的频率。这些音符数据也被转换为 Vexflow 可读取的格式，以显示吉他谱。

我已经将此功能分解为 4 个步骤。以下是 HTML5 吉他谱播放器的工作原理

MusicXML

当选择一个谱表（一个 谱表）时，jQuery ajax() 函数将加载 MusicXML 文件，解析其内容，并将所有格式化的音符数据附加到一个 <script> 标签中。每个音符的格式如下：playNote(音符, 音阶, 时长)。

playNote(notes.C, 4, 1);

MusicXML 文件中的谱表记谱信息也会被处理并附加到一个 <div> 标签中，供 Vexflow 使用。

以下是 MusicXML 文件中我使用的节点结构

    
        1024
    
    
        
            C
            4
        
        1024
        
            
                1
                2
            
        
    
    the note node repeats for the rest of the notes in the measure…

以下是 ajax() 函数生成的源代码。

用于音频

用于谱表

tabstave notation=true
	notes :q 1/2 :q 1/2 :q 3/1 :q 3/1 | :q 5/1
   …

频率计算

当点击播放按钮时，音乐数据 <script id=”audio”> 标签会被评估，并且音符信息会使用以下公式转换为频率（假设等音律）：

frequency = 440 * 2^(n/12)

440 是第四个音阶的 A 音的频率。

n = 与 A4 (440) 的距离。

我使用一个数组来存储某个音符与基本音符“A”之间的距离。

notes = {C:-9, Cs:-8, D:-7, Ds:-6, E:-5, F:-4, Fs:-3, G:-2, Gs:-1, A:0, As:1, B:2};

为了合并音符可以在不同的音阶中演奏，我将上面的公式修改如下：

frequency = 440 * 2^((音阶-4) * 12 + 距离)/12);

Audiodata.js

我在吉他谱播放器中使用了 Audiodata.js 库，它可以轻松地使用单个数组播放连续音频。该库封装了音频数据 API 方法。Audiodata.js 在 GitHub 上可用，地址为：https://github.com/notmasteryet/audiodata。Audiodata.js 项目包含一个使用“一闪一闪亮晶晶”的乐谱示例，它激发了我构建这个吉他谱播放器的灵感。

Vexflow 和动画光标

Vexflow 是一款基于 HTML5 画布元素的开源网络音乐记谱渲染 API (http://www.vexflow.com/)。我使用 Vexflow 来显示每个 MusicXML 文件的谱表。我在 Vexflow 画布的顶部添加了一个额外的画布元素，以控制将音频链接到谱表的红色光标。音频的速度由节奏控制，节奏以每分钟节拍数衡量。通过将此节奏转换为毫秒，我能够将其用于第二个画布的重绘速度。每次此画布重新绘制时，红色光标都会向右移动 5 像素，以突出显示当前正在播放的音符。
请记住，这个 HTML5 吉他谱播放器只是一个概念验证，只能播放单个音符。

如果你对如何改进这个谱表播放器有任何建议，或者想为这个项目做出贡献，请查看以下文章： http://www.gregjopa.com/2010/12/html5-guitar-tab-player-with-firefox-audio-data-api/