FLex 编写网页MP3播放器

随着互联网的快速发展，HTML5显得越来越强势，个人认为，在短时间内Flex还是具有先天独厚的优势，就比如写个网页播放器，几行代码就可以搞定。现在给大家分享一下源码，可供大家学习和参考。

演示：应用到网站后的效果（请使用IE）

原码效果

Flex源码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           xmlns:bridge="bridge.*"
           width="379" height="118" initialize="application1_initializeHandler(event)">
   <fx:Declarations>
       <bridge:FABridge/>
       
   </fx:Declarations>
   <fx:Script>
       <![CDATA[
           import mx.controls.Alert;
           import mx.core.FlexGlobals;
           import mx.events.FlexEvent;

           private var snd:Sound;
           private var channel:SoundChannel;
           private var trans:SoundTransform;
           private var playStatus:Number = 0;
           private var playPosition:Number = 0;

           [Bindable]
           private var sonname:String="Hold不住的爱";

           private var musicurl:String="http://localhost:700/ohyewang.mp3";

           private var autostart:String="0";

           var clock:Timer = new Timer(100, 100000);//每0.1秒更新一次
           protected function application1_initializeHandler(event:FlexEvent):void
           {
               var app:Application=this;

               try
               {
                   if(app.parameters.hasOwnProperty('musicurl'))
                   {
                       sonname=app.parameters.sonname;
                       musicurl=app.parameters.musicurl;
                       autostart=app.parameters.autostart;
                   }
               }
               catch(e)
               {

               }

               var copyrightMenuItem:ContextMenuItem = new ContextMenuItem("关于ohyewang.com", true, true);
               copyrightMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,function(e:ContextMenuEvent){
                   navigateToURL(new URLRequest("http://www.ohyewang.com"), "_blank");
               });
               var contextMenuCustomItems:Array = FlexGlobals.topLevelApplication.contextMenu.customItems;
               contextMenuCustomItems.push(copyrightMenuItem);

               flash.external.ExternalInterface.addCallback("play",play);//添加JS回调函数

               flash.external.ExternalInterface.call("javascriptMethod");//调用JS方法

               if(autostart=="1")
               {
                   play();//自动播放
               }
           }

           protected function play(){
               // 标示当前播放状态，0是未加载，1是播放，2是暂停
               if(playStatus==0 || playStatus==1)
               {
                   if(playStatus==0)
                   {
                       snd = new Sound(new URLRequest(musicurl));
                       trans = new SoundTransform();
                       trans.volume = hsVolume.value/hsVolume.maximum;

                   }

                   playButton.label = "暂停";
                   channel = snd.play(playPosition);
                   playStatus = 2;
               }
               else if(playStatus==2)
               {
                   playButton.label = "播放";
                   channel.stop();
                   playStatus = 1;
               }

               clock.start();
               clock.addEventListener(TimerEvent.TIMER,showTime);
           }

           protected function button1_clickHandler(event:MouseEvent):void
           {
               play();
           }

           protected function showTime(event:Event):void{
               playPosition = channel.position;
           var current:String=formatDate(channel.position);
               var total:String=formatDate(snd.length);
               timeLabel.text =current + " / " +total ;
               hsProgress.value = channel.position/snd.length * hsProgress.maximum;

               if(current==total)
               {
                   playPosition=0;
                   hsProgress.value=0;
                   channel.stop();
                   channel = snd.play(hsProgress.value/hsProgress.maximum * snd.length);
               }
           }


           protected function hsProgress_changeEndHandler(event:FlexEvent):void
           {
               channel.stop();
               channel = snd.play(hsProgress.value/hsProgress.maximum * snd.length);

               timeLabel.text = formatDate(channel.position) + " / " + formatDate(snd.length);
           }

           protected function hsVolume_changeEndHandler(event:FlexEvent):void
           {
               trans.volume = hsVolume.value/hsVolume.maximum;
               channel.soundTransform = trans;
           }

           // 把毫秒格式化为时间
           protected function formatDate(num:Number):String
           {
               var total:int = int(num / 1000);
               var second:int = total%60;
               total = (total-second)/60;
               var minute:int = total%60;
               total = (total-minute)/60;
               var hour:int = total;

               var returnValue:String = "";
               if(hour!=0) returnValue = String(hour) + ":";
               if(minute<10) returnValue += "0";
               returnValue += String(minute) + ":";
               if(second<10) returnValue += "0";
               returnValue += String(second);
               return returnValue;
           }

           // 把播放进度绑定到播放时间的标签上，以及调整进度的组件上
           protected function application1_enterFrameHandler(event:Event):void
           {
               timeLabel.text = formatDate(channel.position) + " / " + formatDate(snd.length);
               playPosition = channel.position;
               hsProgress.value = channel.position/snd.length * hsProgress.maximum;
           }



       ]]>
   </fx:Script>
   <s:BorderContainer x="3" y="6" width="369" height="108">
       <s:Label x="83" y="47" text="进度：" width="45"/>
       <s:HSlider id="hsProgress" x="135" y="48" width="221" changeEnd="hsProgress_changeEndHandler(event)" maximum="100" showDataTip="false"/>
       <s:Label x="83" y="67" text="音量：" width="45"/>
       <s:HSlider id="hsVolume" x="136" y="71" width="221" changeEnd="hsVolume_changeEndHandler(event)" value="5" maximum="10" showDataTip="false"/>
       <s:Button id="playButton" x="12" y="53" label="播放" click="button1_clickHandler(event)" width="55"/>
       <s:Label id="timeLabel" x="139" y="12" text="00:00 / 00:00" />
       <s:Label x="83" y="12" text="播放进度："/>
       <s:Label x="83" y="88" width="274" color="#BDB9B9" text="{sonname}" textAlign="center"
               verticalAlign="middle"/>

   </s:BorderContainer>
</s:Application>

目录结构：

Html源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title></title>
<meta name="google" value="notranslate" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center;
background-color: #ffffff; }
object:focus { outline:none; }
#flashContent { display:none; }
</style>



<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" src="history/history.js"></script>


<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "11.1.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
    var flashvars = {};
  flashvars.sonname = "Hold不住的爱";//设置歌曲名称
flashvars.musicurl = "http://localhost:700/ohyewang.mp3";//歌曲地址
flashvars.autostart = "1";//启用自动播放
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "EmbedMusicFlex";
attributes.name = "EmbedMusicFlex";
attributes.align = "middle";
swfobject.embedSWF(
"EmbedMusicFlex.swf", "flashContent",
"379", "118",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>

<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
11.1.0 or greater is installed.
</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>
</div>

<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="379" height="118" id="EmbedMusicFlex">
<param name="movie" value="EmbedMusicFlex.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />

<object type="application/x-shockwave-flash" data="EmbedMusicFlex.swf" width="379" height="118">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />


<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
11.1.0 or greater is not installed.
</p>

<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
</a>

</object>

</object>
</noscript>
</body>
</html>