Tag / 开发

by jabbany

ABPlayer 开发日志（一）

这大概是ABPlayer开发以来的第一个开发日志了，为什么前面好久没发？因为ABPlayer开发难度真的好高好高，特别是一些高级的基本功能实现，并不是那么得容易，不过也就借此机会在这里展示一下ABPlayer（正在成熟中）的核心构思。要是有弹幕播放器开发者恰巧路过，欢迎借鉴，这几本是弹幕播放器的一些核心思想~

开发得各种杂合体

Continue reading →

by jabbany

AmbiencePlayer | 环境播放器 开发（二）

经过努力，FLEX端的编程已经完成了很大部分。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init();" >
	<mx:Script>
		<![CDATA[
			import flash.media.Sound;
			import flash.media.SoundLoaderContext;
			import flash.net.URLRequest;
			import mx.rpc.events.ResultEvent;
			public var s:Sound = new Sound();
			public var channel:SoundChannel;
			public var t:Timer;
			public var lastPos:int = -1;
			public var lrc:Array = new Array();
			public function init():void{
				var req:URLRequest = new URLRequest(Application.application.parameters.url);
				var context:SoundLoaderContext = new SoundLoaderContext(8000, true);
				s.load(req,context);
				fetchLRC.url = Application.application.parameters.lrc;
				fetchLRC.send();
			}
			public function lrcLoaded(event:ResultEvent):void{
				var lyrics:String = event.result.toString();
				lyrics=lyrics.replace("\r","");
				var tmp:Array = lyrics.split("\n");
				for(var i:int=0;i<tmp.length;i++){
					if(tmp[i].toString().charAt(0)=="["){
						var pattern:RegExp = /\[\d+:\d+\.\d+\]/g;
						var tmpArr:Array = String(tmp[i]).match(pattern);
						for(var j:int=0;j<tmpArr.length;j++){
							var p:RegExp = /[\[\]]/g;
							var tmp2:Array = String(tmpArr[j]).replace(p,"").split(":");
							lrc[String(int(Number(tmp2[0])*6000+Number(tmp2[1])*100))]=tmp[i].toString().replace(/^\[.+\]/g,"");
						}
					}
				}
				t=new Timer(10);
				t.addEventListener(TimerEvent.TIMER,executeLRC);
				channel = s.play();
				t.start();
				if(Application.application.parameters.loop=="true"){
					channel.addEventListener(Event.SOUND_COMPLETE,loopSound);
					function loopSound(event:Event):void{
						channel.stop();
						channel.removeEventListener(Event.SOUND_COMPLETE,loopSound);
						channel=null;
						t.reset();
						t.start();
						channel = s.play();
						channel.addEventListener(Event.SOUND_COMPLETE,loopSound);
					};
				}
			}
			public function executeLRC(event:TimerEvent):void{
				var position:int = (channel.position / 10);
				ExternalInterface.call("updatePosition",position);
				if(position!=lastPos){
					for(var i:int=lastPos;i<=position;i++){
					if(lrc[String(i)]!=null)
						if(String(lrc[String(i)]).charAt(0)=="{"){
							lrc[String(i)] = String(lrc[String(i)]).replace(String.fromCharCode(13),"");
							var preg:RegExp=/^\{.+:.+:.+:.+:.+:.+\}/g;
							var matArr:Array=String(lrc[String(i)]).match(preg);
							if(matArr.length==0){
								ExternalInterface.call("showLyrics",lrc[String(i)]);
							}else{
								//EXECUTE
								preg = /[{}]/g;
								var exec:Array = String(matArr[0]).replace(preg,"").split(":");
								trace(exec);
								if(String(exec[0]).charAt(0)=="#"){
									var HTMLElementId:String=String(exec[0]).substr(1,String(exec[0]).length);
									switch(String(exec[1]).toLowerCase()){
										case 'transition':{
											var p:RegExp = /^#/g;
											exec[3] = String(exec[3]).replace(p,"");
											exec[4] = String(exec[4]).replace(p,"");
											ExternalInterface.call("colorFade",HTMLElementId,String(exec[2]),exec[3],exec[4],20,int(Number(exec[5])));
										}break;
										case 'style':{
											ExternalInterface.call("eval","document.getElementById(\"" + HTMLElementId + "\").style." + String(exec[2]) + "=\"" + String(exec[3]) + "\";");
										}break;
										case 'fade':{
											ExternalInterface.call("opacityFade",HTMLElementId,String(exec[5]));
										}break;
										case 'call':{
											ExternalInterface.call(String(exec[2]),String(exec[3]),String(exec[4]),String(exec[5]));
										}break;
									}
								}
								var lyricLine:String = String(lrc[String(i)]).replace(/^\{.+\}/g,"");
								lyricLine = lyricLine.replace(String.fromCharCode(13),"");
								trace(lyricLine.length);
								trace(lyricLine.charCodeAt(0));
								if(lyricLine.length>0){
									ExternalInterface.call("showLyrics",lyricLine);
								}
							}
						}else{
							ExternalInterface.call("showLyrics",lrc[String(i)]);
						}
					}
					lastPos=position;
				}
			}
			public function loadError():void{
				//Swallow it!
			}
		]]>
	</mx:Script>
	<mx:HTTPService id="fetchLRC" 
    	url="default.lrc"
    	result="lrcLoaded(event)"
    	fault="loadError()" 
    	resultFormat="text">
    </mx:HTTPService>
</mx:Application>
by jabbany

AmbiencePlayer | 环境播放器 开发（一）

Knh.C新开发项目——AmbiencePlayer.WP ，用于WordPress的环境音乐播放器。

所谓环境播放器，其实就是随着用户设定的程序在音乐播放的同时调整整个网页的环境氛围，进而实现音乐与网页的配色/显示实时同步，至少设计是这样的。

基本模式：页面加载 JS 用于编辑页面格式，载入 FLASH 影片，FLASH请求XML的“环境”数据并播放，通过ExternalInterface的调用来实现

计划是扩展 LRC 格式，定义了“HTML元素组”，通过{}括起操作语句：

[ti:沙耶の呗] [ar:いとうかなこ] [al:] [by:] /* 这些会被播放器忽略 */
[tr:200] /* 定义歌词渐变时间，默认200ms */
[eg:a=#tag,#tag1|b=#tlresp,#tag] /* 定义HTML元素组 */
[00:00.00]{a:style:display:none:0:0}
[00:02.45]{a:transition:text:#fff:#000:200}『沙耶の呗』
[00:04.98]{a:style:color:#fff:0:0}
[00:06.66]{#tag3:transition:background:#fff:#000:2020}《沙耶の呗》ED
[00:08.53]作词：江幡育子 /* 没有动作标记的语句仅仅更新歌词，不会影响HTML页面 */
[00:09.86]作曲：江幡育子
[00:11.48]编曲：矶江俊道

操作语句如下：

{object:type[transition|fade]:entity[text|background|border]:start_value:end_value:duration}
{object:style:css_property:value:0:0}

其中 Object 可为 HTML id (#开始)，或者为之前定义的“效果组”(Effect Group)。

插件在页面插入JS代码，提供相应的变换函数，由flex制作的flash播放器进行处理，控制载入。

载入流程如下：载入文章的同时，播放器插件载入，插入JS和FLASH代码，FLASH根据自动播放设置判断信息，播放音频文件（和可能的循环播放），载入 knLRC 的增强型歌词文件，并根据时间轴发出JS请求。

目前插件在编写中，后续开发报告还会继续。