几款js音乐播放器使用

1、Audio.js这个音乐播放器很简约,使用很简单,如果对功能需求少的用户,可以考虑这个插件。

audio-js.jpg

下载地址:http://kolber.github.io/audiojs/ 安装包下载后里面的index.html有原始的使用介绍。

1).把audio.js,player-graphics.gifaudiojs.swf放在同一个文件夹里。

2).在页面引用js,

<script src="/audiojs/audio.min.js"></script>
3).初始化js,
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
4).引用html代码


<audio src="/mp3/juicy.mp3" preload="auto" />
注:有几个可选项:


preload="auto":提前加载

autoplay="autoplay":自动播放

loop="loop":循环播放

5).此外还可以自定义css样式,播放列表等,比较简洁。

audio-js-playlist.jpg


2.Codrops Audio, 界面使用纯CSS编写,支持响应式,可以方便在桌面、平板以及手机设备上使用。界面因为是CSS编写,所以如果懂CSS样式,可以自己设计一个新的样式来修改。

下载地址:http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/

1).将audioplayer.min.js引用页面

<script src="jquery.js"></script>
<script src="audioplayer.js"></script>

<link rel="stylesheet" href="css/audioplayer.css" />

2).初始化

<script>$( function() { $( 'audio' ).audioPlayer(

classPrefix: 'player', // 风格,默认: 'audioplayer'
strPlay: 'Play', // 播放按钮提示,默认: 'Play'
strPause: 'Pause', // 暂停按钮提示,默认: 'Pause'
strVolume: 'Volume', // 音量按钮提示,默认: 'Volume'


); } );</script>

3).引入html代码

<audio  preload="auto" controls autoplay loop>

src="audio1.wav"

src="audio2.wav"

</audio>

4).也可以设为极简风格

<div class="audioplayer 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>
5).另外也可以修改audioplayer.css文件去搭配你页面风格。


3.JPlayer
一个jQuery HTML5网页播放器,相信不少人用过这款。因为兼容性很好,如IE6也兼容。

下载地址:https://github.com/happyworm/jPlayer/releases



本博客所有文章如无特别注明均为原创。作者:zz复制或转载请以超链接形式注明转自 沉思录
原文地址《几款js音乐播放器使用

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)