html5的音乐精灵

熟练使用css的童鞋们都知道css精灵，现在给大家安利一个好用的“音乐精灵”；顾名思义，和css精灵一样的用法，只是音乐精灵需要配合js来使用

使用音频精灵是解决移动Safari中多重声音需求的最佳解决方案之一。很像CSS图像精灵，音频精灵将您的所有音频组合成单个流，如图1所示。

图1

原理很简单。您将需要存储每个精灵的数据：起始位置，结束位置或长度以及ID。当您想播放特定的精灵时，您将currentTime音频流设置为开始位置并调用play()。

清单1.简单的音频精灵实现

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// audioSprite has already been loaded using a user touch event var audioSprite = document.getElementById('audio'); var spriteData = {     meow1: {         start: 0,         length: 1.1     },     meow2: {         start: 1.3,         length: 1.1     },     whine: {         start: 2.7,         length: 0.8     },     purr: {         start: 5,         length: 5     } };   // play meow2 sprite audioSprite.currentTime = spriteData.meow2.start; audioSprite.play();




 

清单1将播放meow2小精灵，因为没有逻辑实现停止时，精灵完成，它也会玩呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜 通过向ontimeupdate清单14中的事件添加事件监听器 ，您可以currentTime在sprite到达其结束时观看 并停止音频

清单2.添加逻辑以在流到达精灵的末尾时停止流

1 2 3 4 五 6

var handler = function() {     if (this.currentTime >= spriteData.meow2.start + spriteData.meow2.length) {         this.pause();     } }; audioSprite.addEventListener('timeupdate', handler, false);

 

使用音频精灵的一个很大的优点是，在sprites之间切换时不会有任何延迟（比如在音频流之间切换，假设整个音频精灵被加载）。将所有流都放在一个文件中也有利于减少HTTP请求。

请注意，更改currentTime不是100％准确。设置currentTime为6.5可以实际寻求到6.7或6.2。每个精灵之间需要少量的空间，以避免寻求另一个精灵的结尾。如果在六分之一秒开始时，流搜索到6.4，则添加该空间可能会稍微延迟。

确保在访问任何精灵之前加载整个音频流。这很重要，因为如果音频流未完全加载，并尝试访问加载的流的一部分，流将需要缓冲，并且流加载时将发生延迟。

 

摘抄至Aaron Gloege 在IBM上面发表的文章《克服iOS HTML5音频限制》