音频/视频

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 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 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. });

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

已有 1155 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!