超越 HTML5:交互式音频的实验

这是 David Humphrey 发表的一篇重要文章的转载,他一直在 Mozilla 可扩展平台的基础上进行很多实验,并且对多点触控、声音、视频、WebGL 和各种其他好东西进行了实验。值得仔细阅读下面所有演示。你会发现一些让你惊叹和启发的精彩内容。

David 的工作很重要,因为它展示了 Web 的发展方向,以及 Mozilla 如何助力 Web 的发展。我们不仅在致力于 HTML5(我们快要完成了),而且还在努力弄清楚下一步该做什么。Mozilla 的平台 Gecko 是我们能够以如此快的速度进行实验和学习的关键原因之一。这从这里展现的可能性中可以看出来。这是一个你可以用全新的方式看到、触碰和交互的 Web。

以下为 David 的文章内容

我正在与不断壮大的 Web、音频和 Mozilla 开发者团队合作,开发一个项目,旨在将音频频谱数据从 Firefox 的音频和视频元素公开给 JavaScript。今天我们展示了我们在 www2010 上所做的工作。

我与 Al MacDonald 一起参加了在北卡罗来纳州罗利举办的www2010 大会。我们来这里展示我们在浏览器中公开音频数据方面的成果。在过去的一个月里,CorbanCharles 和许多其他朋友与我们一起细化了 API,并准备了新型演示。我们最终准备了 11 个演示,其中一些之前我已经在这里展示过。这里介绍其他演示。

第一个演示是由 Jacob Seidelin 完成的,展示了使用我们的 API 对音频进行许多炫酷的 2D 可视化操作。你可以在他的网站上查看实时版本,或者观看这个视频

第二个和第三个演示是由 Charles Cliffe 完成的,展示了使用 WebGL 和他的 CubicVR 引擎 进行 3D 可视化操作。这些演示还展示了他的 JavaScript 节拍检测代码。JavaScript 的速度足够快吗?能实时分析音频并同步 3D 图形吗?可以,当然可以。实时版本位于这里这里,这里有一些视频

第四个演示是由 Corban Brook 完成的,展示了如何使用脚本实时混合音频数据。这里,他将主音频静音,播放它,将数据通过用 JavaScript 编写的低通滤波器,然后将修改后的帧转储到第二个音频元素中播放。这是我们需要更广泛地应用的一种技术,因为它具有很大的潜力。这里是实时版本,这里是一个视频(看看他更新的JavaScript 合成器,我们也展示了它)。

第五个和第六个演示是由 Al 完成的(在很多人的帮助下)。当我去波士顿参加 Bocoup 的 Processing.js 会议时,我们遇到了来自 W3C 的 Doug Schepers。他很喜欢我们的东西,并与我们讨论了一些值得构建的有趣想法。他拿出他的 iPhone 并向我们展示了Brian Eno 的 Bloom 音频应用程序。“在浏览器中做这个会很酷。”是的,这很酷,而且这里就是,用 几百行 JavaScript 和 Processing.js 代码 写成 (视频 1视频 2)

此演示还展示了 Felipe Gomes 的出色工作,他为 Firefox 添加了 多点触控 DOM 事件 的补丁。我们在这里使用的方法可以进一步发展。想象一下,能够将多个浏览器连接在一起进行协作创作音乐,在下方添加其他音频层,混合片段而不是仅仅是振荡器等等。我们在一个星期内构建了这个演示,而 Web 的能力远不止于此。

我们演讲中的一个主要观点是强调我们这里谈论的不仅仅是一个概念,它也并非遥远的未来。这是一些真实的代码,在真实的浏览器中运行,而且全部用 HTML5 和 JavaScript 完成。Web 的速度足以进行实时音频处理,并且功能强大、表达力强,足以创作音乐。而且数字音乐和音频黑客、可视化器等社区对此渴望不已。他们渴望到会主动联系我们,下载我们修改后的版本,并创建出精美的 Web 音频应用程序。

我们想继续前进,而且需要帮助。我们需要来自 Mozilla 内部、W3C 和其他浏览器供应商的帮助,将这些东西加入到发布的浏览器中。我们需要音频、数字音乐、可访问性和 Web 社区共同努力,帮助我们构建 js 音频库和更多示例应用程序。昨天 Joe Hewitt 在 Twitter 上说,Web 浏览器供应商需要更多地尝试非标准 API。我完全同意,这是一个让大家行动起来的机会。让我们让音频成为开放 Web 中可脚本化的一部分。

我目前正在创建我们更新的 Firefox 补丁的新版本,完成后我会在这里发布链接。你可以在这里阅读更多关于我们工作技术细节的信息,并在这里参与到 bug 修复中。你可以在 processing.js 频道(我在 moznet 上的用户名是 humph)的 IRC 上与我交流,或者通过 Twitter (@humphd) 或电子邮件联系我。无论通过哪种方式,请与我联系,这样你就能帮助我们推动这项工作前进。


12 条评论

  1. discoleo

    语音识别?我们想要它!

    2010 年 4 月 30 日 下午 12:58

  2. Andy

    很棒的东西即将到来!

    2010 年 5 月 1 日 上午 03:12

  3. John Nash

    看到一篇帖子展示了对音频元素的提议更改带来的好处,但没有一个视频使用 HTML 5 视频元素,这有点奇怪……

    2010 年 5 月 3 日 下午 17:48

  4. guapo

    虽然现在很技术化,但这个概念当然不是新鲜事物。那些还记得 60 年代后期和 70 年代初期在 Fillmore East 的 Joshua Light Show 的人不会感到很惊讶。

    对于那些没去过那里的人来说,那也是一样的,音乐背后的图像。音乐是现场演奏的,由像 Jefferson Airplane、Jimi Hendrix、The Moody Blues 和许多其他人这样的人提供。

    2010 年 5 月 4 日 下午 17:20

  5. QOAL

    如果 API 以与 AVS 相同的方式公开频谱和示波器数据,那将非常棒。

    对于某些情况来说,需要经过许多事件循环,这很好,但对于这些演示中这样的音乐可视化来说,它会拖慢编码速度。

    来自 AVS 帮助:(AVS 是一个 winamp 插件)
    getosc(band,width,channel) = 返回以 ‘band’ 为中心的波形数据,(0..1),采样宽度为 ‘width’ (0..1)。
    ‘channel’ 可以是:0=中心,1=左,2=右。返回值为 (-1..1)

    getspec(band,width,channel) = 返回以 ‘band’ 为中心的频谱数据,(0..1),采样宽度为 ‘width’ (0..1)。
    ‘channel’ 可以是:0=中心,1=左,2=右。返回值为 (0..1)

    将 band 作为浮点数可以避免人们需要了解音频文件有多少个频段,这简化了操作,当然,能够像目前提议的那样获取音频也有其优点。

    如果它像 snd = new Audio(“blah.ogg”);
    function render() {
    for (i = 0; i <= i; i+= 0.01) {
    specHeight = snd.getspec(i, 0, 0); //这里 getspec 会返回正在播放的当前音频数据,如果什么也没播放,则返回 0。
    //绘制/调整大小
    }
    }

    我的评论可能过时了,但我还是说出来了。

    2010 年 5 月 5 日 上午 06:13

  6. Kenneth Arnold

    我设计了一个音乐编曲应用程序,我想在浏览器中构建它,但我需要录音功能,并且需要与播放紧密同步。这可能吗?

    2010 年 5 月 7 日 上午 08:50

  7. carl

    这确实太棒了!而且是的:“语音识别?我们想要它!”但这将意味着下一场革命……

    2010 年 5 月 10 日 下午 12:46

  8. […] VP8 是其中的一部分,HTML5 也是另一部分。如果你关注这个博客,你会发现其他部分也开始出现。Web 正在渗透到越来越多的技术中,而 Firefox 处于领先地位。我们打算 […]

    2010 年 5 月 19 日 上午 09:24

  9. Nicholas Bieber

    自从我在 CDM 上读到相关内容后,我一直都在玩耍……我只对音频编程略知一二,主要是使用 JUCE 库玩玩……

    我成功地将一个鼓循环(赞美!)作为 *.ogg 文件拉入,并在内存中缓冲并循环播放。它有点卡顿,但我能看到这将是多么有趣!

    2010 年 5 月 24 日 凌晨 00:45

  10. […] HTML5 是另一个片段。如果你正在看这个博客(weblog),你也会开始看到其他一些开始出现的片段(other pieces starting to emerge as well)。网络越来越受 Firefox 的驱动,它拥有许多技术 […]

    2010 年 6 月 13 日 上午 09:25

  11. F1LT3R

    如果你想学习如何开始使用 Firefox 交互式音频 API,你可以观看这两个 2 分钟的视频教程…

    在 JavaScript 中读取音频
    http://bit.ly/b05vvO

    从 JavaScript 写入音频
    http://bit.ly/9OU2va

    2010 年 9 月 8 日 下午 15:33

  12. Thomas Thelliez

    也许你已经知道,有一个非常不错的在线服务叫做 eenox,它可以创建 CSS3 动画和交互式 HTML5 网页,适用于手机、智能手机和电脑。即使你不是开发者,你也可以专注于设计并创建很棒的 Web 文档。

    如果你感兴趣,这里有一个 url:http://eenox.net/

    2011 年 10 月 10 日 上午 06:47

这篇文章的评论已关闭。