【原】自制简单的flash MP3播放器(自带暂停，继续功能)
背景：
最近做一个项目，需要在页面上试听一些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 actionStop(position:int) {
if (_status.firstClick == true) {
//停止播放
_channel.stop();
//通知客户端更新上一条资源结束
ExternalInterface.call("Over", _status.htmlID);
//记录停止位置
_status.pausePosition = position;
_status.isPlaying = false;
}
else {
trace("Nothing to stop");
}
}
function actionPause() {
if (_status.pausePosition == 0 && _status.isPlaying == true) {
actionStop(_channel.position);
} else if (_status.pausePosition > 0 && _status.isPlaying == false) {
actionPlay(_req.url,_status.htmlID);
} else {
trace("Nothing to Pause");
}
}
//对应页面上一次试听动作，由于页面只有一个按钮，所以要根据状态来决定调用哪个动作
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随意交互的。
最后附上代码和例子下载：
http://files.cnblogs.com/wbpmrck/%e6%92%ad%e6%94%be%e5%99%a8.rar