AudioPlayer.js 基于 jQuery 免费的音频音乐播放器

Question

AudioPlayer 是一个免费的音频播放器，基于最新版的 jQuery 库，使用方便反应迅速，加载速度非常快，能够兼用目前主流的浏览器，通过修改其 CSS 可完全自定义播放器外观。

特点

• 反应迅速：要实现这一目标，全部责任落在你的 CSS。我的例子是反应迅速。你可以有无响应的球员，但我们不建议。响应能力是良好的 web 体验的一个重要标志。
• 可触摸：Touchableness是一种良好的 web 体验以及一个重要标志。这些有两个，你是设备和屏幕独立。这是完成了一半的工作
• 自适应：当浏览器完全不支持的音频元素或任何提供的音频文件，播放机然后优雅地降低到一个按钮 （仅适用于播放/暂停按钮） <embed />根据元素的玩家，将会使用 （大多是快速在 Mac 上的时间，在 Windows 上的 Windows 媒体播放器） 的第三方插件来播放音频文件。另一种可能的情况： 在浏览器中禁用 JavaScript。浏览器的默认播放器会再采取行动。而这是完全没问题。
• 可用：基本/播放 / 暂停和播放进度控制，卷上 / 关闭 / 向上 / 向下控件和征兆的多少，音频预加载 （缓冲）。
• 图像较少：这取决于你的 CSS 以及。我的播放机看起来是所有 CSS，不使用单个图像文件。一切与em单位，使播放机进行缩放和放大。
• 无flash：这么长时间，flash。你在这里是不需要的。
• 轻盈：该插件的最的版本是只是4KB大小。

使用方法

添加音频元素、 设置的属性，你需要和添加源。您将添加更多不同的来源，更多的用户将能够听听您的音频，因为没有一个音频格式跨所有浏览器支持。

<audio src="audio.wav" preload="auto" controls></audio>

这只是将预加载audio.wav文件，并不会直接播放，直到用户单击播放按钮。preload值设置为其他值时，将不预加载该音频文件。

我们也可以设置多个音频文件，以兼容更多浏览器：

<audio preload="auto" controls>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
</audio>

神秘的 controls 它是一个布尔属性不会影响任何方式中的插件，但可确保该浏览器的默认播放器是显示和禁用 JavaScript 时显示控件与控件。

最后一步就是调用插件，我们在文件的底部引入所需要的插件文件，完整的代码如下：

<audio src="audio.wav" preload="auto" controls></audio>
<script src="jquery.js"></script>
<script src="audioplayer.js"></script>
<script>
$(function(){
        $('audio').audioPlayer();
});
</script>

可选参数

该插件一些可选的参数。最重要的一个被称为 classPrefix。传递的值成为子元素的父元素和类名称前缀的类名称。其他选项只可能有利英语以外的语言。具有默认值的示例：

$('audio').audioPlayer({
    classPrefix: 'audioplayer',
    strPlay: 'Play',
    strPause: 'Pause',
    strVolume: 'Volume'
});

低版本浏览器兼容

对于没有音频文件被支持的浏览器，AudioPlayer.js 将切换到迷你模式，只是保留了少量的按钮和播放器进度条，基本上减少了播放机播放/暂停按钮 （因为"嵌入"元素是有限的操作）：

<div class="audioplayer audioplayer-stopped audioplayer-mini">
<embed src="audio.wav" width="0" height="0" volume="100" autostart="false" loop="false" />
<div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
</div>

两个音频播放 Bug

audio 添加 autoplay 属性后有两个音频播放，其中一个无法控制，会一直播放，我查看了官网的 demo 也是这种情况，查了半天终于查出来了，问题出在 clone() 的上面：

<audio controls autoplay>
  <source src="music/333.mp3">
</audio>

将源代码中把 audio 标签 clone 后生成 dom 的那部分改成在原标签上创建父级元素然后插入，再插入到 dom 中

var thePlayer = $('<div class="' + params.classPrefix + '"></div>');
$('.detail_content').append(thePlayer);
$this.appendTo(thePlayer);
$( '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div>').appendTo(thePlayer);

然后再加一个自动播放命令

if (isAutoPlay){
  thePlayer.addClass(cssClass.playing);
  theAudio.play();
}

附录：HTML5 Video 和 audio JS 属性方法

事件名称	描述
abort	在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay	在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
canplaythrough	在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
durationchange	元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied	媒体被清空（初始化）时触发。
ended	播放结束时触发。
error	在发生错误时触发。
loadeddata	媒体的第一帧已经加载完毕。
loadedmetadata	媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
loadstart	在媒体开始加载时触发。
mozaudioavailable	当音频数据缓存并交给音频层处理时
pause	播放暂停时触发。
play	在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing	在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress	告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange	在回放速率变化时触发。
seeked	在跳跃操作完成时触发。
seeking	在跳跃操作开始时触发。
stalled	在尝试获取媒体数据，但数据不可用时触发。
suspend	在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate	元素的currentTime属性表示的时间已经改变。
volumechange	在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
waiting	在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。

属性

autoplay

布尔属性；如果指定（默认值为"false"）；指定后，音频会马上自动开始播放，不会停下来等着数据载入结束。

buffered

你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个TimeRenges对象。

controls

如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

loop

布尔属性；如果指定，将循环播放音频。

mozCurrentSampleOffset

在音频播放时，表示相对于音频开始处的偏移量的一个数值。

muted

表示是否静音的布尔值。默认值为false，表示有声音。

played

一个 TimeRenges 对象，表示所有已播放的音频片段。

preload

枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

• none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
• metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
• auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。
• 空字符串 : 等效于auto属性。

假如不设置，默认值就是浏览器定义的了（不同浏览器会选择自己的默认值）， 即使规范建议设置为 metadata.

使用备注

• autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置 autoplay 和 preload 属性在规范里是允许的。
• 规范没有强制浏览器去遵循该属性的值，这仅仅只是个提示。
• src 嵌入的音频的 URL。你可以在 audio 元素中使用 <source> 元素来替代该属性指定嵌入的音频。
• volume 音频播放的音量。值从0.0 (无声) 到 1.0 (最大声).
• 时间偏移量目前是指定为 float 类型的值，表示偏移的秒数。
  备注： HTML 5 规范中，时间偏移量值的定义还没有完成，有可能会变更。
• buffered 获得视频的第一段缓冲范围（部分），以秒计：

相关链接

• https://github.com/ronald8192/AudioPlayer-OsvaldasValutis
• 作者主页：http://osvaldas.info/