音频/视频

HTML5+jQuery轻量级音频播放器插件

创客主机


Light-AudioPlayer是一款基于jQuery,HTML5和CSS3的轻量级音频播放器插件。该音乐播放器采用CSS3制作界面,具有体积小,自适应各种屏幕等特点。可以在桌面和移动设备中正常工作。

HTML结构:

该音乐播放器采用了HTML5 标签的典型用法。

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

你也可以加上自动播放(autoplay)与循环播放(loop):

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

浏览器兼容:

当前,audio 元素支持三种音频格式:

IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg Vorbis
MP3
Wav

上表可以看出,没有一种格式是支持所有浏览器的。所以,要尽可能支持更多的浏览器,你可以这样指定多个音频格式:

  1. <audio preload="auto" controls>
  2.   <source src="audio.wav" />
  3.   <source src="audio.mp3" />
  4.   <source src="audio.ogg" />
  5. </audio>

初始化插件:

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

小技巧:

该音乐播放器插件有一些可选的参数:

1、classPrefix传递的值会成为父元素的类名和子元素的类前缀名。

2、str开头的参数有助于你将按钮提示本地化。

  1. $( 'audio' ).audioPlayer(
  2. {
  3.     classPrefix: 'audioplayer',
  4.     strPlay: 'Play',
  5.     strPause: 'Pause',
  6.     strVolume: 'Volume'
  7. });
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!