您的位置:首页> 日志> 前端技术 正文
DTOP

定制简约式MP3播放器

stillfish | 2014年06月24日 |

>>收藏本文 已有 0条评论

在这个月项目中遇到了个小难题,因很少接触MP3音频播放,尝试了多种方法,和大家分享一下。
 
原始需求:实现校歌MP3音频在线播放
需求分析:WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件。无法实现简单的播放效果。一开始想用HTML5的<audio>标签,但是IE8及以下版本又不支持。
 
而使用系统媒体上传附件方法,默认调用浏览器默认播放器,却不尽如意,无法控制自动播放,高度,宽度等等:
 
chrome效果:
 
IE浏览器:
 
我们只需要实现一个简单的播放与停止的效果,在搜索引擎的帮助下找到了一个《Flash网页mp3播放器》
 
它支持长短调整 、支持前景色调整 、支持背景色调整,支持自动播放,循环播放。
 
HTML代码:
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" 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="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="25" height="20"></embed> 
  6. </object> 
 
参数说明:
file=MP3地址
songVolume=音量大小
backColor=背景颜色
frontColor=播放箭头颜色
autoStart=是否自动播放
repeatPlay=是否循环播放
showDownload=是否显示下载地址
 
效果预览:
 
 
 
 
相关文件下载: