FLex 编写网页MP3播放器

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">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <!-- 
    Smart developers always View Source. 
    
    This application was built using Adobe Flex, an open source framework
    for building rich Internet applications that get delivered via the
    Flash Player or to desktops via Adobe AIR. 
    
    Learn more about Flex at http://flex.org 
    // -->
    <head>
        <title></title>
        <meta name="google" value="notranslate" />         
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
             the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
             the percentage of the height of its parent container, which has to be set explicitly.  Fix for
             Firefox 3.6 focus border issues.  Initially, don't display flashContent div so it won't show 
             if JavaScript disabled.
        -->
        <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>
        
        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section -->
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        <!-- END Browser History required section -->  
            
        <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>
        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
             JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
             when JavaScript is disabled.
        -->
        <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" />
                <!--[if !IE]>-->
                <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" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <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>
                <!--<![endif]-->
                    <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>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </noscript>     
   </body>
</html>