2011-12-26 54 views
0

我正在设计一款使用JavaScript(jQuery)和HTML5的音乐播放器,并使用Flash AS3进行回退。基本上我想要做的是能够点击HTML控件元素并让它们与Flash进行交互,以播放/暂停和跳过播放列表中的曲目(播放列表JSON文件由JavaScript读取,将文件ID传递给AS3,AS3读取另一个JSON文件,以获得URL,然后播放音频)JavaScript/jQuery Flash AS3交互

这使我只能用Flash来播放音频,从而创造不管HTML5浏览器支持相同的用户体验。

我假设我将不得不“听”在AS3的事件,但是在怎么搞的JS这些事件,并作出反应AS3事件的指针将是一个很大的帮助!

+1

我假设你已经谷歌搜索“从JavaScript调用Flash函数”? – 2011-12-26 22:42:48

+0

是的,我在这里有一个链接已经过期的页面,然后我在这里搜索,没有发现任何看起来相关的东西。我正在使用手机进行搜索,但我没有互联网,而是在本地主机服务器上离线构建。 – 2011-12-26 22:47:29

+0

@安迪雷为什么谷歌它可以问他在这里? – Taurayi 2011-12-27 02:04:17

回答

1

成JavaScript和ActionScript之间的通信,可以使用ExternalInterface API:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html

作为替代你想做什么,你可以使用SoundManager类2播放音频,并尽一切你自己的编程中的JavaScript:

“使用HTML5和Flash,SoundManager类2提供了可靠的跨平台的单一的JavaScript API下 声音。”

http://www.schillmania.com/projects/soundmanager2/

+0

谢谢你,你救了我免于混乱!使用ExternalInterface也非常简单! – 2011-12-27 11:23:08

1

我对这个问题的答案,但在那之前我完成了它的答案被接受。反正这里是:

Main.as(文档类):

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

    public class Main extends Sprite 
    { 
     private var _sound:Sound; 
     private var _soundChannel:SoundChannel; 

     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 

     }// end function 

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

     }// end function 

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

     }// 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 = { 
     }; 
     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 { height:100%; overflow:hidden; } 
     body { margin:0; margin-top:25px; } 
     .button { float:left; margin-left:25px; width:100px; height:60px; 
        background-color:#fafafa; border: 1px solid #e1e1e1; 
        font-size:15px; font-family: Arial; text-align:center; padding-top:40px; 
        text-decoration: none; color: #323232; } 
    </style> 
</head> 
<body> 
    <script> 
    $(document).ready(function() { 

     var soundPlayer = $("#SoundPlayer").get(0); 

     $.getJSON('json/sounds.json', function(data) { 

      $.each(data.sounds.sound, function(i, sound) { 

       $("<a href=\"#\" class=\"button\">" + sound.name + "</a>") 
       .click(function() { soundPlayer.loadSound(sound.url); }) 
       .appendTo("body"); 

      }); 

      $("<a href=\"#\" class=\"button\">Stop Sounds</a>") 
      .click(function() { soundPlayer.stopSounds(); }) 
      .appendTo("body"); 

     }); 

    }); 
    </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>