ABPlayer开发日志(二)

我发现命名撞车是件好可怕的事情= =这和所谓的“爱播搞清播放器”之类的没关系哈——ABP是纯Flash的弹幕播放器。

好吧,废话说到这里,ABPlayer基础构架貌似差不多了,目前能比较流畅的运行弹幕了,而且有了第一套Javascript接口功能。有感兴趣看看下面吧~ Continue reading →

ABPlayer 开发日志(一)

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

开发得各种杂合体

Continue reading →

ABPlayer 开发开始

最近发现有对KnDanmakuWP 很感兴趣的同志们,正好限于KnLiveCommentary这个东西效率实在是差,所以打算以KnLiveCommentary功能设计为基础,以PADPlayer和MukioPlayer为两个基本点,以A站播放器,B站播放器,CMP4和KnLC 为四个指导方针开始研发 ABPlayer。于是,这称作C站的计划开始。

注意此ABPlayer非彼ABPlayer(AmbiencePlayer)。

“坑爹”的研发测试界面

Continue reading →

《鸟之诗》 —— 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请求。

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

KnLiveCommentary V1.2

KnH弹幕播放器 – KnLiveCommentary V1.2

KnLiveCommentary V1.2

KnLiveCommentary V1.2 截图

弹幕播放器通常是指在线视频所用的FLASH播放器,这种播放器与普通的播放器不同,除了最基本的播放功能以外,用户还可以通过播放器进行“弹幕”,同时这些弹幕会被保存起来,在播放器加载的时候会载入以前的弹幕,这样每一个用户都可以看到其他用户的弹幕。相对与传统的播放器来说,弹幕播放器增强了交互性,增强了用户间的交流。

Continue reading →