一个真棒的html5互动音乐视频

WebDesignerDepot员工 经过 WDD员工  |  2011年12月09日

设计师和开发人员正在推动信封与封面’在持续的基础上以交互式设计。令人敬畏的新例子一直出现。

其中一个最新的例子是一个 互动音乐视频 为了 evelyn.,艾比。

It’S一个梦幻般的网站,让您有机会将不同的乐器和声乐样式混合在一起,而歌曲正在播放,以获得完全定制的经验。

我们向开发人员询问他们如何创建这样一个令人敬畏的交互式视频,并获得了他们研究这种类型的项目的提示。

1.视频的想法来自哪里?什么是创造性的过程?

虽然我们没有直接参与创造性的过程,但我们会给你一个简短的摘要,就它是如何创建的。

我们,Steffen&Dominik,刚刚在柏林的Web开发机构创立了 Bleech. 专注于HTML5和其他现代网络技术。我们将我们的办公室与一个录音室一起与乐队成员运行的录音室 雅比。该空间由预订机构和IOS代理完成。

我们大多数人都互相认识到以来,我们从那以后在许多不同和创造性环境中的许多不同项目中都有努力。

视频的实际想法是由我们研究设计的美国的朋友开发的。他需要一个专题为他的论文,并有愿景创建交互式经验,这让用户试验了现代歌曲的不同组成部分。

 

2.您是否可以快速概述实际创建视频的过程,所涉及的步骤等?

乐队的最大挑战之一是选择其声音和特点不同的适当仪器,但同时具有令人愉快的声音和相互协调。此外,他们必须确保新综合轨道的节奏和谐波在任何时候都没有互相相互反对。

我们相信他们对此做出了非常好的工作。

整个想法是开发的,而不处理有关Web技术的任何技术要求。因此,他们开始为柏林的一个历史悠久的音乐演播室录制一个视频。这导致总共有20个个人视频,然后必须合并以使这个想法成为现实。对于此任务,他们要求一个友好的Flash开发人员制作一个网站,您可以在其中控制不同的曲目并混合自己的歌曲版本。不幸的是,他面临着网络连接的同步过程面临一些困难,因此早期的草案从未使其成为最终版本。

那’当我们进来的时候。我们认为有可能将他们的想法与最新技术带入生活中,没有人尚未以这种确切的方式使用。

我们开始在测试驱动的JavaScript环境中构建基础,以确保视频,我们的MediaControllers和全局时间线模块之间的一致通信。 MediaControllers负责切换视频并仅显示当前所选轨道。时间轴模块用作每个MediaController的参考时间,并在必要时同步它们。

 

3.项目期间出现意外的挑战?您将为想要创建这样的项目的开发人员提供什么建议?

在开发过程中的一个艰难的部分是保持视频同步而不会对许多计算进行操作,并且即使在较旧的计算机上也可以进行良好的,响应的用户体验。

我们发现最有效的方法是若干算法的聚合,可将视频同步并适应机器’通过增加阈值和触发同步频率的频率来实现性能。

虽然在毫秒的地区进行了最大的挑战,但对于每分钟120次节拍的歌曲,可以通过侦听器清楚地注意到任何轨道的偏移量。最后,我们设法在高性能计算机上同步地同步地获得所有音频和视频轨道(如2011年MacBook Pro / Air)。

如果你’Re计划开发媒体驱动的HTML5项目,为不眠之夜做好准备,优化小型代码,不可预见的浏览器错误和一百万可能的方法来实现单一功能。

 

4.您在未来几年内看到这种内容在哪里?

我们希望更多开发人员开始尝试与媒体相关的Web项目进行实验,并希望看到为媒体丰富的应用程序创建了新的框架。到目前为止,Java(处理)和Flash仍然对某些用例具有一些优点。

目前HTML5中最突出的发展绝对是音频和视频功能,我们期待着在新浏览器中实现的MediaController或设备元素等功能。

使用WebSocket等现代服务器技术,我们正在等待查看向用户提供实时事件,而不是仅服务静态,预先记录的内容。此外,很高兴看到更大的互动内容,将社交体验与现有媒体渠道集成。现在每个人都在谈论的通常的东西…

我们很高兴成为该项目的一部分,并与各种专业知识的伟大艺术家合作。该项目已成为我们的小宝贝,我们真的被积极的回应所淹没。

顺便说一句,我们’重新寻找人们支持我们的成长团队。

 

您最近看到的其他精彩的HTML5项目是什么?让我们在评论中知道!