jplayer利用flash支持在浏览器上播放mp3
做项目的时候一开始只使用浏览器原生自带的播放器，发现支持mp3的不多，
Ie6,7,8支持mp3, <embed height="65" width="340" src="thanks.mp3" />
火狐不支持mp3,chrome支持<audio controls="controls" height="65" width="340">
最后使用jplayer，支持mp3，简单例子：
html：
<script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/gallery/sphinx/1.1.3/jquery.js"></script> <script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script> <body class="demo"> <div id="player_container"> <div class="player_in"> <div id="jquery_jplayer"></div> <ul id="player_controls"> <li id="player_play"><a href="#" onClick="$('#jquery_jplayer').play(); return false;" title="play"><span>play</span></a></li> <li id="player_pause"><a href="#" onClick="$('#jquery_jplayer').pause(); return false;" title="pause"><span>pause</span></a></li> <li id="player_stop"><a href="#" onClick="$('#jquery_jplayer').stop(); return false;" title="stop"><span>stop</span></a></li> <li id="player_volume_min"><a href="#" onClick="$('#jquery_jplayer').volume(0); return false;" title="min volume"><span>min volume</span></a></li> <li id="player_volume_max"><a href="#" onClick="$('#jquery_jplayer').volume(100); return false;" title="max volume"><span>max volume</span></a></li> </ul> <div id="player_progress"> <div id="player_progress_load_bar"> <div id="player_progress_play_bar"></div> </div> </div> <div id="player_volume_bar"> <div id="player_volume_bar_value"></div> </div> <div id="player_playlist_message"> <!-- <div id="play_time"></div> --> <div id="total_time"></div> </div> </div> </div> </body>
css：
#player_container { position: relative; background-color:#eee; width:418px; height:75px; border:1px solid #494949; } #player_container ul#player_controls { list-style-type:none; padding:0; margin: 0; } #player_container ul#player_controls li { overflow:hidden; text-indent:-9999px; } #player_play, #player_pause { display: block; position: absolute; left:40px; top:20px; width:40px; height:40px; cursor: pointer; } #player_play { background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") 0 0 no-repeat; } #player_play.different_prefix_example_hover { background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") -41px 0 no-repeat; } #player_pause { background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") 0 -42px no-repeat; } #player_pause.different_prefix_example_hover { background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") -41px -42px no-repeat; } #player_stop { position: absolute; left:90px; top:26px; background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") 0 -83px no-repeat; width:28px; height:28px; cursor: pointer; } #player_stop.different_prefix_example_hover { background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") -29px -83px no-repeat; } #player_progress { position: absolute; left:130px; top:32px; background-color: #eee; width:122px; height:15px; } #player_progress_load_bar { background: url("http://gtms01.alicdn.com/tps/i1/T1oNA7FcleXXc6zeDX-15-15.gif") top left repeat-x; width:0px; height:15px; cursor: pointer; } #player_progress_play_bar { background: url("http://gtms01.alicdn.com/tps/i1/T1_0_HFnRdXXc6zeDX-15-15.gif") top left repeat-x ; width:0px; height:15px; } #player_volume_min { position: absolute; left:294px; top:32px; background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") 0 -170px no-repeat; width:18px; height:15px; cursor: pointer; } #player_volume_max { position: absolute; left:366px; top:32px; background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") 0 -186px no-repeat; width:18px; height:15px; cursor: pointer; } #player_volume_min.different_prefix_example_hover { background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") -19px -170px no-repeat; } #player_volume_max.different_prefix_example_hover { background: url("http://gtms01.alicdn.com/tps/i1/T1WmQAFiReXXXy0bv4-200-400.jpg") -19px -186px no-repeat; } #player_volume_bar { position: absolute; left:312px; top:37px; background: url("http://gtms01.alicdn.com/tps/i1/T1DUTJFhJeXXaYd3fr-5-5.gif") repeat-x top left; width:46px; height:5px; cursor: pointer; } #player_volume_bar_value { background: url("http://gtms01.alicdn.com/tps/i1/T1jMTgFjldXXaYd3fr-5-5.gif") repeat-x top left; width:0px; height:5px; } #player_playlist_message { position: absolute; left: 254px; top: 28px; font-family: Arial, Helvetica, sans-serif; } #play_time, #total_time { padding-top:.3em; font-weight:normal; font-style:oblique; font-size:.7em; } #play_time { float:left; } #total_time { float:right; text-align: right; } .player_in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
最后js：
$(document).ready(function(){ $("#jquery_jplayer").jPlayer({ ready: function () { $("#jquery_jplayer").changeAndPlay('thanks.mp3'); }, swfPath: "js", cssPrefix: "different_prefix_example" }); $("#jquery_jplayer").jPlayerId("play", "player_play"); $("#jquery_jplayer").jPlayerId("pause", "player_pause"); $("#jquery_jplayer").jPlayerId("stop", "player_stop"); $("#jquery_jplayer").jPlayerId("loadBar", "player_progress_load_bar"); $("#jquery_jplayer").jPlayerId("playBar", "player_progress_play_bar"); $("#jquery_jplayer").jPlayerId("volumeMin", "player_volume_min"); $("#jquery_jplayer").jPlayerId("volumeMax", "player_volume_max"); $("#jquery_jplayer").jPlayerId("volumeBar", "player_volume_bar"); $("#jquery_jplayer").jPlayerId("volumeBarValue", "player_volume_bar_value"); $("#jquery_jplayer").onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) { var myPlayedTime = new Date(playedTime); var ptMin = (myPlayedTime.getMinutes() < 10) ? "0" + myPlayedTime.getMinutes() : myPlayedTime.getMinutes(); var ptSec = (myPlayedTime.getSeconds() < 10) ? "0" + myPlayedTime.getSeconds() : myPlayedTime.getSeconds(); $("#play_time").text(ptMin+":"+ptSec); var myTotalTime = new Date(totalTime); var ttMin = (myTotalTime.getMinutes() < 10) ? "0" + myTotalTime.getMinutes() : myTotalTime.getMinutes(); var ttSec = (myTotalTime.getSeconds() < 10) ? "0" + myTotalTime.getSeconds() : myTotalTime.getSeconds(); $("#total_time").text(ttMin+":"+ttSec); }); $("#jquery_jplayer").onSoundComplete( function() { $("#jquery_jplayer").play(); }); });
总结：不要只用前端的思想去解决问题，碰到问题的时候要好好思考，利用前后端的思想，或者其他方面，拓展开去，就像这里，用flash插件去播放mp3，以前做过flash，可以接入外部的mp3，可以在服务器端放flash接入mp3，返回swf，然后播放。
