您的位置： 首页 >日志>前端技术>详细内容

前端技术

定制简约式MP3播放器

来源：本站原创 发布时间：2014-06-24 17:31:21 浏览次数： 次 【字体：小 大】
在这个月项目中遇到了个小难题，因很少接触MP3音频播放，尝试了多种方法，和大家分享一下。
 
原始需求：实现校歌MP3音频在线播放
需求分析：WEB页面上没有标准的方式来播放音频文件，大多数的音频文件是使用插件来播放，而众多浏览器都使用了不同的插件。无法实现简单的播放效果。一开始想用HTML5的
 
而使用系统媒体上传附件方法，默认调用浏览器默认播放器，却不尽如意,无法控制自动播放，高度，宽度等等：
 
chrome效果：
 
IE浏览器：
 
我们只需要实现一个简单的播放与停止的效果，在搜索引擎的帮助下找到了一个《Flash网页mp3播放器》
 
它支持长短调整 、支持前景色调整 、支持背景色调整，支持自动播放，循环播放。
 
HTML代码：
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="" width="25" height="20">  
  2. <param name="movie" value="images/music_player.swf?file=images/music.mp3&width=25&songVolume=100&backColor=E8E8E8&frontColor=000000&autoStart=false&repeatPlay=false&showDownload=false">  
  3. <param name="quality" value="high">  
  4. <param value="transparent" name="wmode">  
  5. <embed src="images/music_player.swf?file=images/music.mp3&songVolume=100&backColor=E8E8E8&frontColor=000000&autoStart=false&repeatPlay=false&showDownload=false" quality="high" pluginspage="" type="application/x-shockwave-flash" width="25" height="20"> embed> 
  6. object> 
 
参数说明：
file=MP3地址
songVolume=音量大小
backColor=背景颜色
frontColor=播放箭头颜色
autoStart=是否自动播放
repeatPlay=是否循环播放
showDownload=是否显示下载地址
 
效果预览：
 
 
 
 
相关文件下载：
 
{PE.SiteConfig.ApplicationPath/}{PE.SiteConfig.uploaddir/}/Article/20146/201406241745583803.rar
×

用户登录