【原】自制简单的flash MP3播放器(自带暂停，继续功能)

2010-09-20 21:24 刺客之家阅读(1138) 评论(1) 编辑收藏举报

背景：

最近做一个项目，需要在页面上试听一些mp3资源，这些资源都部署在服务器上，直接给出url链接。刚开始使用Object嵌入MediaPlayer的方法，但是发现效果不好，播放wav很快但是mp3要缓冲几分钟才能播出来，最后受不了了改用flash来播放mp3,上网找了一圈，没什么现成的好用，就自己制作了一个flash Mp3播放器。

环境：

Flash CS3 专业版

思路：

用flash制作一个可以接受url播放mp3的播放器，然后利用flash和javascript进行交互，从而控制界面UI进行更新。

js调用flash的方法进行播放，flash调用js方法进行UI更新

这个简单的播放器纯粹在后台运作，不需要UI.

步骤：

1：打开cs3,新建一个flash,点击第一个关键帧

2：打开动作面板（需要在工具栏里找到），添加代码：

import flash.events.Event;
import flash.media.Sound;
import flash.net.URLRequest;
import flash.external.*;
import flash.events.*;
import flash.media.*;
import flash.display.*;
import flash.net.URLRequest;

var method:Function = actionPlay;
var method2:Function = actionPause;
var method3:Function = HtmlAction;

ExternalInterface.addCallback("start",method);
ExternalInterface.addCallback("pause",method2);
ExternalInterface.addCallback("doprelisten",method3);

//当前请求的Mp3文件
var _req:URLRequest;

var _status = {
htmlID:"",
firstClick:false,
loadComplete:false,
isPlaying:false,
pausePosition:0,
length:0,
played:0,
volume:0.7
};

//资源
var _sound:Sound= new Sound();

//声音通道
var _channel:SoundChannel;

//事件处理函数
function onPlaybackComplete(event:Event)
{
trace("The sound has finished playing.");
_status.isPlaying = false;
ExternalInterface.call("Over", _status.htmlID);

}
//开始播放
function actionPlay(url:String,id:String)
{
//已经开始播放就停止播放，重新播放新的
if (_status.isPlaying == true)
{
  //return false;
  //停止播放
  _channel.stop();
  //通知客户端更新上一条资源结束
  ExternalInterface.call("Over", _status.htmlID);
  _sound = new Sound();
  _req = new URLRequest(url);
  _sound.load(_req);
  _status.firstClick = true;
}
//首次点击
if (_status.firstClick == false) {
  _req = new URLRequest(url);
  _sound.load(_req);
  _status.firstClick = true;
}

//开始播放
_channel = _sound.play(_status.pausePosition,1);

//初始化暂停位置
_status.htmlID=id;
_status.pausePosition = 0;
_status.isPlaying = true;

//增加完成监听
_channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);
//通知客户端更新图标
ExternalInterface.call("Begin", _status.htmlID);

}

//对应页面上一次试听动作，由于页面只有一个按钮，所以要根据状态来决定调用哪个动作
function HtmlAction(url:String,id:String)
{
//如果是第一次进来，则播放
if(_status.htmlID=="")
{
  actionPlay(url,id);
}
//不是第一次进来，如果传入的url不是正在播放的url，则换资源
else if (_req.url!=url)
{
  actionPlay(url,id);
}
else
{
  actionPause();
}
}

3：在js中增加对应的函数调用

代码

 1 
 2  // the newest Prelisten Proc begin
 3  
 4  function PrelistenAction(imgID, url)
 5 {
 6  document.getElementById('flashMp3').doprelisten(url,imgID);
 7 }
 8  function Start(imgID, url)
 9 {
10  //document.getElementById('flashMp3').start('http://192.168.85.48:8080/IVRToyResource/haojiubujian.mp3');
11   //document.getElementById('flashMp3').start('haojiubujian.mp3');
12   //document.getElementById('flashMp3').start('落汤鸡.mp3');
13   //document.getElementById('flashMp3').start('http://192.168.85.48:8080/IVRToyResource/魔术棒.mp3');
14   //document.getElementById('flashMp3').start('http://www.hongdaishu.com/download/st/55002雪花.mp3');
15  document.getElementById('flashMp3').start(url,imgID);
16  
17     var img =document.getElementById(imgID); 
18     img.setAttribute("src","images/play_pause.gif");
19 }
20 
21 function Pause()
22 {
23  document.getElementById('flashMp3').pause();
24 }
25 
26 //called by flash
27 
28 function Begin(imgID) 
29 {
30     var img =document.getElementById(imgID); 
31     img.setAttribute("src","images/play_pause.gif");
32 }
33 function Over(imgID) 
34 {
35     var img =document.getElementById(imgID); 
36     img.setAttribute("src","images/play.gif");
37 }
38 // the newest Prelisten Proc end
39

下面附上我的Html代码：

代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <!--[if gte IE 5.5000]><script type="text/javascript" src="pngfix.js"></script><![endif]-->
  7 <link href="style.css" rel="stylesheet" type="text/css" />
  8 
  9 <script type="text/javascript" src="main.js"></script>
 10  
 11 <object id="MediaPlayer" width="0" height="0" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-mplayer2"> 
 12 <param name="URL" value="" />
 13 </object>
 14 
 15 </head>
 16 
 17 
 18 <body>
 19 <object id="flashMp3" name="flashMp3" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"  width="50" height="50" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
 20           <param name="movie" value="mp3player.swf" />
 21           <param name="quality" value="high" />
 22           <param name="wmode" value="transparent" />
 23               <param name="allowScriptAccess" value="always" />
 24 
 25 　　　　　<!--　<param name="allowScriptAccess" value="sameDomain" />-->
 26 　　　　　<!--<embed src="default.swf" wmode="transparent" quality="high"  allowScriptAccess="sameDomain"  swliveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="699" height="500"></embed>-->
 27       
 28           <embed src="mp3player.swf" wmode="transparent" quality="high"  allowScriptAccess="always"  swliveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="50" height="50"></embed>
 29         </object>
 30 
 31 <form id="form">
 32     
 33 
 34 <div class="listWidth">
 35   <table width="693" border="0" cellpadding="0" cellspacing="0" class="table01">
 36     <tr>
 37       <td width="41" bgcolor="#ffbe55"></td>
 38       <td width="180" bgcolor="#ffbe55" class="tableTitle">故事名称</td>
 39       <td width="103" bgcolor="#ffbe55" class="tableTitle">上传日期</td>
 40       <td width="51" bgcolor="#ffbe55" class="tableTitle"><div align="center">试听</div></td>
 41       <td width="54" bgcolor="#ffbe55" class="tableTitle"><div align="center">下载</div></td>
 42       <td width="264" bgcolor="#ffbe55"></td>
 43     </tr>
 44     
 45     <tr>
 46       <td bgcolor="#ffd169"><span style="padding-left:10px">
 47         <input id="001-01" name="input" type="checkbox" value="" />
 48       </span></td>
 49       <td bgcolor="#ffd169"><a href="javascript:PrelistenAction('001PrelistenImg01','http://www.hongdaishu.com/download/st/21001沉默的小猪.mp3');"><span style="width:160px" >沉默的小猪</span></a><a  href="javascript:Pause();">2暂停</a><a  href="javascript:Start('001PrelistenImg01','http://www.hongdaishu.com/download/st/52001大树大树飞起来.mp3');">3换歌</a></td>
 50       <td bgcolor="#ffd169">2010/9/10</td>
 51       <td bgcolor="#ffd169"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg01" onclick="PreListenOp('001PrelistenImg01','http://www.hongdaishu.com/download/st/21001沉默的小猪.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
 52        <td bgcolor="#ffd169"><div align="center"><a href="#"><img id="001DownImg01" src="images/download.gif" onclick="ChinaPubDown('0', '沉默的小猪', '0', 'http://www.hongdaishu.com/download/toy/21001沉默的小猪.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
 53       <td bgcolor="#ffd169"></td>
 54     </tr>
 55     <tr>
 56       <td bgcolor="#ffe38d"><span style="padding-left:10px">
 57         <input id="001-02" name="input" type="checkbox" value="" />
 58       </span></td>
 59       <td bgcolor="#ffe38d"><span style="width:160px" >小狗剔牙</span></td>
 60       <td bgcolor="#ffe38d">2010/9/10</td>
 61       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg02" onclick="PreListenOp('001PrelistenImg02','http://www.hongdaishu.com/download/st/21002小狗剔牙.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
 62       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img id="001DownImg02" src="images/download.gif" onclick="ChinaPubDown('0', '小狗剔牙', '0', 'http://www.hongdaishu.com/download/toy/21002小狗剔牙.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
 63       <td bgcolor="#ffe38d"></td>
 64     </tr>
 65     <tr>
 66       <td bgcolor="#ffd169"><span style="padding-left:10px">
 67         <input id="001-03" name="input" type="checkbox" value="" />
 68       </span></td>
 69       <td bgcolor="#ffd169"><span style="width:160px" >揉啊揉</span></td>
 70       <td bgcolor="#ffd169">2010/9/10</td>
 71       <td bgcolor="#ffd169"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg03" onclick="PreListenOp('001PrelistenImg03','http://www.hongdaishu.com/download/st/21003揉啊揉.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
 72       <td bgcolor="#ffd169"><div align="center"><a href="#"><img id="001DownImg03" src="images/download.gif" onclick="ChinaPubDown('0', '揉啊揉', '0', 'http://www.hongdaishu.com/download/toy/21003揉啊揉.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
 73       <td bgcolor="#ffd169"></td>
 74     </tr>
 75     <tr>
 76       <td bgcolor="#ffe38d"><span style="padding-left:10px">
 77         <input id="001-04" name="input" type="checkbox" value="" />
 78       </span></td>
 79       <td bgcolor="#ffe38d"><span style="width:160px" >湖水睁着亮眼睛</span></td>
 80       <td bgcolor="#ffe38d">2010/9/10</td>
 81       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg04" onclick="PreListenOp('001PrelistenImg04','http://www.hongdaishu.com/download/st/21004湖水睁着亮眼睛.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
 82       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img id="001DownImg04" src="images/download.gif" onclick="ChinaPubDown('0', '湖水睁着亮眼睛', '0', 'http://www.hongdaishu.com/download/toy/21004湖水睁着亮眼睛.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
 83       <td bgcolor="#ffe38d"></td>
 84     </tr>
 85     <tr>
 86       <td bgcolor="#ffd169"><span style="padding-left:10px">
 87         <input id="001-05" name="input" type="checkbox" value="" />
 88       </span></td>
 89       <td bgcolor="#ffd169"><span style="width:160px" >开心小刺猬</span></td>
 90       <td bgcolor="#ffd169">2010/9/10</td>
 91       <td bgcolor="#ffd169"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg05" onclick="PreListenOp('001PrelistenImg05','http://www.hongdaishu.com/download/st/21005开心小刺猬.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
 92       <td bgcolor="#ffd169"><div align="center"><a href="#"><img id="001DownImg05" src="images/download.gif" onclick="ChinaPubDown('0', '开心小刺猬', '0', 'http://www.hongdaishu.com/download/toy/21005开心小刺猬.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
 93       <td bgcolor="#ffd169"></td>
 94     </tr>
 95     <tr>
 96       <td bgcolor="#ffe38d"><span style="padding-left:10px">
 97         <input id="001-06" name="input" type="checkbox" value="" />
 98       </span></td>
 99       <td bgcolor="#ffe38d"><span style="width:160px" >学学丁当狗</span></td>
100       <td bgcolor="#ffe38d">2010/9/10</td>
101       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg06" onclick="PreListenOp('001PrelistenImg06','http://www.hongdaishu.com/download/st/21006学学丁当狗.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
102       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img id="001DownImg06" src="images/download.gif" onclick="ChinaPubDown('0', '学学丁当狗', '0', 'http://www.hongdaishu.com/download/toy/21006学学丁当狗.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
103       <td bgcolor="#ffe38d"></td>
104     </tr>
105     <tr>
106       <td bgcolor="#ffd169"><span style="padding-left:10px">
107         <input id="001-07" name="input" type="checkbox" value="" />
108       </span></td>
109       <td bgcolor="#ffd169"><span style="width:160px" >黑鼻孔的小乌龟</span></td>
110       <td bgcolor="#ffd169">2010/9/10</td>
111       <td bgcolor="#ffd169"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg07" onclick="PreListenOp('001PrelistenImg07','http://www.hongdaishu.com/download/st/21007黑鼻孔的小乌龟.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
112       <td bgcolor="#ffd169"><div align="center"><a href="#"><img id="001DownImg07" src="images/download.gif" onclick="ChinaPubDown('0', '黑鼻孔的小乌龟', '0', 'http://www.hongdaishu.com/download/toy/21007黑鼻孔的小乌龟.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
113       <td bgcolor="#ffd169"></td>
114     </tr>
115     <tr>
116       <td bgcolor="#ffe38d"><span style="padding-left:10px">
117         <input id="001-08" name="input" type="checkbox" value="" />
118       </span></td>
119       <td bgcolor="#ffe38d"><span style="width:160px" >魔术棒</span></td>
120       <td bgcolor="#ffe38d">2010/9/10</td>
121       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg08" onclick="PreListenOp('001PrelistenImg08','http://www.hongdaishu.com/download/st/21008魔术棒.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
122       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img id="001DownImg08" src="images/download.gif" onclick="ChinaPubDown('0', '魔术棒', '0', 'http://www.hongdaishu.com/download/toy/21008魔术棒.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
123       <td bgcolor="#ffe38d"></td>
124     </tr>
125     <tr>
126       <td bgcolor="#ffd169"><span style="padding-left:10px">
127         <input id="001-09" name="input" type="checkbox" value="" />
128       </span></td>
129       <td bgcolor="#ffd169"><span style="width:160px" >荣誉墙</span></td>
130       <td bgcolor="#ffd169">2010/9/10</td>
131       <td bgcolor="#ffd169"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg09" onclick="PreListenOp('001PrelistenImg09','http://www.hongdaishu.com/download/st/21009荣誉墙.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
132       <td bgcolor="#ffd169"><div align="center"><a href="#"><img id="001DownImg09" src="images/download.gif" onclick="ChinaPubDown('0', '荣誉墙', '0', 'http://www.hongdaishu.com/download/toy/21009荣誉墙.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
133       <td bgcolor="#ffd169"></td>
134     </tr>
135     <tr>
136       <td bgcolor="#ffe38d"><span style="padding-left:10px">
137         <input id="001-10" name="input" type="checkbox" value="" />
138       </span></td>
139       <td bgcolor="#ffe38d"><span style="width:160px" >一毛不拔</span></td>
140       <td bgcolor="#ffe38d">2010/9/10</td>
141       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img style="visibility:hidden; width:0; height:0;" src="images/play_pause.gif" /><img id="001PrelistenImg10" onclick="PreListenOp('001PrelistenImg10','http://www.hongdaishu.com/download/st/21010一毛不拔.mp3');" src="images/play.gif" width="15" height="13" /></a></div></td>
142       <td bgcolor="#ffe38d"><div align="center"><a href="#"><img id="001DownImg10" src="images/download.gif" onclick="ChinaPubDown('0', '一毛不拔', '0', 'http://www.hongdaishu.com/download/toy/21010一毛不拔.toy','001','幼儿画报',true)" width="15" height="14" /></a></div></td>
143       <td bgcolor="#ffe38d"></td>
144     </tr>
145     <tr>
146       <td bgcolor="#ffd169"><div id="apDiv1"><img src="images/pic_yrhb.png" width="254" height="234" /></div></td>
147       <td colspan="4" bgcolor="#ffd169" class="pageYellow"><a disabled="disabled" style="text-decoration:none">首页</a> 
148 <a disabled="disabled" style="text-decoration:none">          上一页</a> 
149  <a style="font-weight:bolder; text-decoration:none;" disabled="disabled">1</a> 
150  <a href="storyList0012.html">2</a> 
151  <a href="storyList0013.html">3</a> 
152  <a href="storyList0014.html">4</a> 
153 <a href="storyList0012.html">          下一页</a> 　
154 <a href="storyList0014.html">          尾页</a> 　
155 </td>
156       <td bgcolor="#ffd169"></td>
157     </tr>
158   </table>
159 </div>
160 </form>
161 </body>
162 </html>
163

这样一个播放器就大功告成了，点击一个资源试听，发现界面的小图标会改变，再次点击，就是暂停，换一个资源点击，就切换去播放另外一个资源。

最后别忘记在adobe的主页上进行本地的安全性设置，否则flash是不能和js随意交互的。

最后附上代码和例子下载：

https://files.cnblogs.com/wbpmrck/%e6%92%ad%e6%94%be%e5%99%a8.rar

会员力量，点亮园子希望

刷新页面返回顶部

~..淡泊以明志.~.宁静以致远

【原】自制简单的flash MP3播放器(自带暂停，继续功能)

About