AS3 / JavaScript MP3播放器显示已用时间

时间:2011-12-28 22:57:34

标签: flash actionscript-3

我有一个带有外部HTML界面的Flash MP3播放器可控制所有内容,除了一个问题外,它的工作正常:我不禁觉得有更好的方法来显示已用时间!

我目前通过AS3中的ExternalInterface将经过时间的值发送给JavaScript并更新HTML。 Flash播放器是1px x 1xx文件,仅用于播放声音。问题是我使用(AS3)setInterval()每隔0.2秒触发一次并以这种方式更新值。

我觉得有一种更好的方法可以做到这一点,不涉及setInterval(),也不涉及使用Flash播放器作为计时器(虽然这是它看起来像它的方式!)

我试过Event.ENTER_FRAME无济于事,因为我在舞台上没有使用任何东西。

1 个答案:

答案 0 :(得分:1)

就像LarsBlåsjö所说,您可以使用Timer类而不是setInterval()方法。我对上一个为您之前的question做的示例进行了更改,以合并Timer个对象。看一下下面的例子:

Main.as(文档类)

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.external.ExternalInterface;
    import flash.media.Sound;
    import flash.media.SoundChannel;
    import flash.net.URLRequest;
    import flash.utils.Timer;

    public class Main extends Sprite 
    {
        private var _sound:Sound;
        private var _soundChannel:SoundChannel;
        private var _onTimer:String;
        private var _timer:Timer;
        private var _currentSoundName:String;

        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);

        }// end function

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            if (ExternalInterface.available)
            {
                ExternalInterface.addCallback("loadSound", loadSound);
                ExternalInterface.addCallback("stopSounds", stopSounds);

            }// end if

            _onTimer = loaderInfo.parameters["onTimer"] as String;

        }// end function

        private function loadSound(name:String, url:String):void
        {
            _currentSoundName = name;
            _sound = new Sound();
            _sound.load(new URLRequest(url));
            if (_soundChannel) _soundChannel.stop();
            _soundChannel = _sound.play();

            if (_onTimer)
            {
                _timer = new Timer(100);
                _timer.addEventListener(TimerEvent.TIMER, onTimer);
                _timer.start();

            }// end function

        }// end function

        private function stopSounds():void
        {
            _soundChannel.stop();
            if(_timer) _timer.stop();

        }// end function

        private function onTimer(e:Event):void
        {
            var event:Object = 
            { 
                soundChannel :
                { 
                    position: _soundChannel.position 
                },
                sound : 
                {
                    name : _currentSoundName,
                    length : _sound.length
                }
            }

            ExternalInterface.call(_onTimer, event);

        }// end function

    }// end class

}// end package

<强> sounds.json:

{ "sounds" : {
    "sound": [
        { "name": "Sound 1", "url": "sounds/sound1.mp3" },
        { "name": "Sound 2", "url": "sounds/sound2.mp3" },
        { "name": "Sound 3", "url": "sounds/sound3.mp3" }
    ]
}}

<强>的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>SoundPlayer</title>
    <meta name="description" content="" />
    <script src="js/swfobject.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        var flashvars = {
            onTimer : "onTimer"
        };
        var params = {
            menu: "false",
            scale: "noScale",
            allowFullscreen: "true",
            allowScriptAccess: "always",
            bgcolor: "",
            wmode: "direct" // can cause issues with FP settings & webcam
        };
        var attributes = {
            id:"SoundPlayer"
        };
        swfobject.embedSWF(
            "SoundPlayer.swf", 
            "altContent", "0", "0", "10.0.0", 
            "expressInstall.swf", 
            flashvars, params, attributes);
    </script>
    <style>
        html, body { margin-left:25px; height:100%; overflow:hidden; font-family: arial; font-size:15px;}
        body { margin:0;  }
        .sound-component 
            { margin-top:25px; width:500px; height:100px; background-color:#fafafa; 
              border: 1px solid #e1e1e1; border-radius: 20px; }
        .sound-component span { padding-left:20px; padding-top:16px; }
        .sound-component .suffix
            { width:130px; display:inline-block; font-weight:bold; }
        .sound-component .name 
            { width: 399px; height: 49px; border-bottom: 1px solid #e1e1e1; 
              border-right:  1px solid #e1e1e1; }
        .sound-component .position-length 
            { width: 399px; height: 49px; border-right: 1px solid #e1e1e1; }
        .sound-component .play-stop-button 
            { float:right; width:100px; height:60px; text-align:center; padding-top:40px; 
               font-weight:bold; font-size:18px; color:#c8c8c8; }
        .sound-component .play-stop-button:hover { color:#323232; }
    </style>
</head>
<body>
    <script>

    $(document).ready(function() {

        // get the flash object
        var soundPlayer = $("#SoundPlayer").get(0);

        // load the json file with the list of sounds
        $.getJSON('json/sounds.json', function(data) {

            // loop through each sound in the list in the loaded json file
            $.each(data.sounds.sound, function(i, sound) {

                // create a html component for the current sound
                var soundComponent = $(

                    '<div class="sound-component">' +
                        '<div class="play-stop-button">Play</div>' +
                        '<div class="name">' +
                            '<span class="suffix">Name: </span>' +
                            '<span class="value"></span>' +
                        '</div>' +
                        '<div class="position-length">' +
                            '<span class="suffix">Position/Length: </span>' +
                            '<span class="value">#</span>' +
                        '</div>' +
                    '</div>'
                );

                $(soundComponent).find(".name .value").text(sound.name);

                $(soundComponent).find(".play-stop-button").click(function ()   { 

                    var text = $(this).find(".play-stop-button").text();

                    soundPlayer.loadSound(sound.name, sound.url); 

                });

                $(soundComponent).appendTo("body");

            });

        });

    });

    function onTimer(event)
    {
        $(".sound-component").each(function(i) {

            var name = $(this).find(".name .value").text();

            if(event.sound.name == name)
            {
                var position = parseInt(event.soundChannel.position).toFixed(0);
                var length = parseInt(event.sound.length).toFixed(0);

                $(this).find(".position-length .value").text(
                    position + "/" + length
                );
            }
            else 
            {
                $(this).find(".position-length .value").text("#");
            }

        });

    }

    </script>

    <div id="altContent">
        <h1>SoundPlayer</h1>
        <p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
    </div>

</body>
</html>


以下是正在执行的index.html文件和正在播放的声音的屏幕截图:

enter image description here


没有详细介绍,要点是flash对象使用ExternalInterface.call()方法调用父容器中的事件处理程序。在TimerEvent.Timer对象发送的每个Timer事件中调用它。在调用事件处理程序时,它解析一个事件对象,该事件对象包含正在播放的当前声音的信息(例如声音名称,声音位置等)。