AmbiencePlayer RC1 测试申请

希望申请测试AmbiencePlayer RC1 的用户请回复到下面。由于AmbiencePlayer RC1 较 Beta 有比较大的改动(比如引入播放列表的概念),所以请使用Beta的用户先看效果:
http://kanoha.org/2011/09/02/abplayer-rc1-test-page/
再申请(会覆盖Beta的某些特性,导致Beta下的配置无法生效)

由于这个插件有开发限制,所以申请不得超过一定数量。(已经是Beta的测试用户不受这个限制的约束,可以继续测试RC1)如果你希望测试AmbiencePlayer,请回复到这篇文章后面,而不是测试页面后面!回复时邮箱字段请填写真实邮箱,并且不要在回复内容里写出你的邮箱避免被一些不怀好意的广告机器搜索到。

还有,测试其实比较“拽”,要是纯播放LRC(像BETA那样)也是支持的…(不要因为我测试把歌词框拽到图片上就以为不能再出现那个页面下方的歌词条了…)

最后,大家也可以在这里回复共享自己的扩展LRC。有关扩展LRC的语法,请看“扩展LRC定义”。ABPlayer基本接受所有的规范。

《鸟之诗》 —— AmbiencePlayer RC1预发布测试

这里是AmbiencePlayer正式预发布版本 RC1。我们将在这个测试文件里测试一下AmbiencePlayer的扩展功能以及这些功能可能实现的效果!
至于求下载什么的,请不要回复在这篇文章上,我会另启一篇文章来提供AmbiencePlayer的发放~还有…请看完完整的5min不要不到1min就关掉,因为有的效果是在后面展示的…
Continue reading →

AmbiencePlayer测试 – 恋愛サーキュレーション

此页面纯属测试,将测试 AmbiencePlayer 改变页面元素的能力和靠谱程度,顺便测试跨浏览器兼容性。

这个测试采用了 AmbiencePlayer支持的扩展LRC文件,为了避免其导致主页载入时也加载播放器,请 Continue reading →

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>

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请求。

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