请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Audio 查看内容

HTML5 audio教程详解

2013-10-6 20:39| 发布者: admin| 查看: 2572| 评论: 0|来自: microsoft

摘要: 各种声音构成了我们的生活背景。现在,HTML5audio元素使 Web 开发人员可以将声音嵌入他们的应用程序。控制的灵活性加上平台其他功能的集成,使多个应用场景得以实现,包括从简单的声音效果到背景音频,再到游戏体验 ...


同步策略

您应该总是考虑到在添加标签、获取内容以及准备好播放之间所涉及的延迟,效果取决于网络质量。具体地讲,当您要处理多个文件时,每个文件都有可能随时被提前或延迟播放。例如,这个声音片段是从本机加载的之前使用过的3 个文件。

您可以在 Timings 列中看到,不同的文件可能在不同的时间就绪。

先预加载全部文件是一个很常用的同步策略。一旦它们全部就绪,您就可以快速迭代循环并开始播放这些文件了。

var audios = [];

var loading = 0;

AddNote("2C");

AddNote("2E");

AddNote("2G");

AddNote("3C");

AddNote("3E");

AddNote("3G");

AddNote("4C");

function AddNote(name) {

loading++;

var audio = document.createElement("audio");

audio.loop = true;

audio.addEventListener("canplaythrough", function () {

loading--;

if (loading == 0) // All files are preloaded

StartPlayingAll();

}, false);

audio.src = "piano/" + name + ".mp3";

audios.push(audio);

}

function StartPlayingAll() {

for (var i = 0; i < audios.length; i++)

audios[i].play();

}

让我们现在就把一切融合在一起!以下演示模拟钢琴演奏(也被称为 Brother John、Brother Peter…或 Fra Martino)。页面开始提取所有音符,当它们被预加载到客户端时显示加载进度。当它们全部就绪时,歌曲开始并保持循环播放。

真实站点中的音频

现在我们已经看过用于处理多个音频文件的常用模式,我想重点介绍几个 Web 站点作为 <audio> 标签使用的最佳实践示例。

Pirates Love Daises: www.pirateslovedaisies.com

 我谈到了 Pirates Love Daises,这是由 Grant Skinner 构建的一个极棒的 HTML5 游戏。除了优秀的游戏剧本和极具吸引力的视觉效果之外,Grant 的团队还开发了一个先进的音频库,可以在游戏中播放多个音频示例。主逻辑被封装在AudioManager 类中。如之前所建议的,在真正开始游戏之前,站点预加载了所有音频剪辑,并在初始加载屏幕中显示累计进度。该站点也考虑了网络超时或在音频文件下载过程中出现错误的情况。

addAudioChannel:function(b,a,f){

var h=document.createElement("audio");

if(f!=true){

this.currAsset=h;

this.timeoutId=setTimeout($.proxy(this,"handleAudioTimeout"),e.AUDIO_TIMEOUT);

h.addEventListener("canplaythrough",$.proxy(this,"handleAudioComplete"),false);

h.addEventListener("error",$.proxy(this,"handleAudioError"),false)

}

h.setAttribute("id",a);

h.setAttribute("preload","auto");

$("<source>").attr("src",b).appendTo(h);

$("<source>").attr("src",b.split(".mp3")[0]+".ogg").appendTo(h);

document.body.appendChild(h)

}

,handleAudioComplete:function(b){

if(LoadedAssets.getAsset(b.target.id)!=true){

LoadedAssets.addAsset(b.target.id,true);

clearTimeout(this.timeoutId);

this.calculatePercentLoaded(true)

}

}

,handleAudioError:function(b){

trace("Error Loading Audio:",b.target.id);

LoadedAssets.addAsset(b.target.id,true);

clearTimeout(this.timeoutId);

this.calculatePercentLoaded(true)

}

,handleAudioTimeout:function(){

trace("Audio Timed Out:",this.currAsset.id);

LoadedAssets.addAsset(this.currAsset.id,true);

this.calculatePercentLoaded(true)

}

Grant 目前正在致力于 Sound Library 项目,该项目将允许开发人员在任何其他应用程序中使用其声音引擎的逻辑。期待这一项目的成功!

Firework(作者:Mike Tompkins): www.beautyoftheweb.com/firework

Firework的演示特别有意思,因为它支持您同时与数条音轨进行互动,动态地更改每条轨道的音量。此外,当您和音频通道互动时,界面将动态响应不同的输入或设置。

这次的音频标签已在 HTML 标记中声明(只有 6 条轨道)。通过监听canplaythrough 事件,以编程方式跟踪该进度。只要全部音频文件已播放就绪,循环就可以检查列表并开始播放。

video.addEventListener('canplaythrough', onCanPlayAudio, false);

for (var i = 0; i < 5; i++) {

var aud = document.getElementById("aud" + i);

targetVolumes.push(0);

aud.volume = 0;

audioTags.push({

"tag":aud,

"ready":false

});

aud.addEventListener('canplaythrough', onCanPlayAudio, false);

}

// Set audio/video tracks

document.getElementById("tompkins").src = MediaHelper.GetVideoUrl("Firework_3");

for (var i = 0; i < audioTracks.length; i++) {

document.getElementById("aud" + i).src = MediaHelper.GetAudioUrl(audioTracks[i]);

}

本例中的开发人员还决定,开始时将音量设置为 0,并在播放就绪的同时将音量动态上调至 1。这个小技巧减少了在音频开始时听见最初的“敲打”噪声的可能性,效果取决于声卡和驱动程序的质量。

BeatKeep: www.beatkeep.net

最后的应用场景可能是此处所展示的示例中最复杂的。在本例中,您可以使用节拍设备构建自己的歌曲,并循环播放多个音频剪辑。在该应用程序中,关键是要具有音频通道的完美同步

节拍设备为您提供对节奏和时间签名的完整控制;使用成熟的计时逻辑和绑定模型,最终结果是非常流畅的体验!

结束语

我鼓励您使用 Internet Explorer 9 或其他浏览器尝试本文中的所有示例和应用程序,并让我们了解您的体验!

12

鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2019-6-21 03:17 , Processed in 0.092989 second(s), 26 queries .

返回顶部