jQuery插件jMP3实现在线MP3 player播放功能

需要实现在线MP3播放功能吗？这里介绍一个jQuery播件jMP3，只需要简单的一行代码就可以轻松实现在线MP3播放功能，jMP3可自定义播放控制、播放进度条提示和预加载等，先来看一下效果图：

使用说明
需要使用jQuery库文件和jMP3 player播放库文件

使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.jmp3.js"></script>

二，HTML部分

  1. <span id="sound" class="mp3">sound.mp3</span>

三，Javascript部分

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("#sound").jmp3();
  4. });
  5. </script>

如上实例，使用非常简单，获取需要实现播放的ID层如上：sound，就可以实现一个在线MP3播放器。

其它使用实例


一，jMP3实现MP3播放进度条提示

1，HTML部分：

  1. <span id="sounddl" class="mp3">sound.mp3</span>

2，Javascript部分：

  1. $("#sounddl").jmp3({
  2. showfilename: "false",
  3. backcolor: "000000",
  4. forecolor: "00ff00",
  5. width: 150,
  6. showdownload: "true"
  7. });

参数说明：
(1) showfilename表示是否显示文件名(播放的MP3名)
(2) backcolor表示MP3播放器的背景颜色
(3) forecolor表示MP3播放器的进度条、控制开关等颜色
(4) width表示MP3播放器的宽度
(5) showdownload表示是否提示下载

二，jMP3实现MP3播放预加载文件

1，HTML部分：

  1. <span id="external" class="mp3">yourepitiful.mp3</span>

2，Javascript部分：

  1. $("#external").jmp3({
  2. filepath: "http://www.thelostplanet.net/WeirdAl/",
  3. backcolor: "ffd700",
  4. forecolor: "8B4513",
  5. width: 300,
  6. showdownload: "false"
  7. });

参数说明：
filepath表示加载MP3的远程路径

从上面三个实例可知，使用jQuery插件jMP3实现MP3 player播放功能实现一个在线MP3播放器就这么简单，一行代码轻松搞定，非常值得推荐。

点我查看jQuery插件jMP3实现MP3 player播放功能在线演示

共有0个回答