Bad Apple ASCII Javasrcipt字符画版| Bad Apple ASCII Javascript

Bad Apple ASCII 版影绘简介

Bad Apple (坏苹果) 影绘是东方同人作品中的经典，经过后期加工也出现了很多版本，其中ASCII码版的字符动画是其中一大主力，并且在各个平台都有成果：视频，网页，DOS，PSP，Telnet服务器，甚至还有启动盘。
于是出于练手的目的先用Javascript (字符动画播放)和HTML5 (音频播放)实现一番。

传送门：http://rotar.tk/ba

                         MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMX             
                        aMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMi             
                        rMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM              
                          BMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM;              
                           ii0MMMMMMMMMMMMMMMMMMMMMMMMMMWMMMMMMM.               
                            :MMMMMMMMMMMMMMMMMMMMMMMMMM@ @MMMMMM                
                           a8MMMMMMMMMMMMMMMMMMMMMMMMMW  MMMMMMM                
                             @MMMMMM88MMMMMMMMMMMMMMMM   MMMMMMW                
 r0:                          7MMMMMMXrS8WMMMMMMMMMMMMX ;MMMMMMM            ,ZMM
MMMMMB;                        XMMMMMMMW80@MMMMMMMMMM   SMMMMMMM,        7BMMMMM
a  aMMMMMZ.                      iaMWWMMMMM0MMMMMM0.r   aMMMMMMM2     2MMMMMa.  
     MM0SMMMX                       i@MMMMMXSM BMr       MMMMMMM   7MMMa.ZMM;   
M   MMMMX  0MMM0aXr;i:,i72X         0MMMMMM@    ;     BZXMMMMMMM0MMMM:  WMMMM  i
MM. MMMMMZ  ;MMMMMMMMMMMMMMZ   ,2WMMMMMMMMMMMMBX     MMMMMMMMMMaXWMM;  BMMMMMi M
MMZ MMMMM@ .MMM0     .MMXiMMS:MMMMMMMMMMMMMMMMMMM@  MM@ BMMMMMa  MMMM: ZMMMMM .M
MMB  MMMMZ MMMMMM   ,MMMM  MMMMMMMMMMMMMMMMMMMMMMMMMMX XMMMMMa  MMMMMM aMMMM  rM
MMM  :MMMX MMMMMM   MMMMMMiMMMMMMMMMMMMMMMMMMMMMMMMMMZ2MMMMMB   MMMMMZ SMMM   ZM
MMM   XMMX  MMMMM   MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMi   MMMMM  SMM    MM
 ZM.   0MX  SMMM0    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM@    MMMM   aM,    MS
  a,    MX   MMMS    ZMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM     WMMi   i7     . 
              MMi     MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM8     8M8             
              SM.     XMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM      2M              
               2       MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM7                      
                       ZMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM                       
                       MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM.                      
                      WMMMMMM0MMMMMMMMMMMMMMMMMMMMMMMMMMMM                      
                      MMMMMM7ZMMMMMMMMMMMMMMMMMMMMMMMMMMMM                      
                     aMMMMMM MMMMMMMMMMMMMMMMMMMMMM0MMMMMMS                     
                     MMMMMM: WMMMMMMMMMMMMMMMMMMMMM.:MMMMM@                     
                  rWMMMMMM@  0MMMMMMMMMMMMMMMMMMMMM. MMMMMMMBX                :S
MMW            iBMMMMMMMMM   @MMMMMMMMMMMMMMMMMMMMMr  MMMMMMMMM@7            MMM
 MMMi       .ZMMMMMMMMMMM    MMMMMMMMMMMMMMMMMMMMMM8  :MMMMMMMMMMMWr       .MMM 
ZMMMMMi   SMMMMMMMMMMMMS     MMMMMMMMMMMMMMMMMMMMMMM    ZMMMMMMMMMMMMWr   BMMMMM
MMMMMMMZWMMMMMMMMMMM8:       MMMMMMMMMMMMMMMMMMMMMM0      i0MMMMMMMMMMMMB@MMMMMM
MMMMMMMMMMMMMMMMB7          7MMMMMMMMMMMMMMMMMMMMMMM:         70MMMMMMMMMMMMMMMM

主要工具

1. 帧提取：Free Video to JPG Converter
2. 字符化：ASC GEN 2.0
3. 抽音轨：Free Video to MP3 Converter

体会

目前从效果来说马马虎虎过得去，3:39的动画源文件15.9MB，按30FPS的帧率抽出一共6572帧66.5MB，转成80×35的字符是17.9MB，自己再进行压缩到4.38MB，最后经过PHP的GZip能压缩到1.4MB。

影音不同步是个大问题，目前在想办法解决，大致的办法是使用Audio的currenttime这个属性来计算当前应该达到的帧并且修改帧的索引值。

本来是想用C++来写的，结果发现长时间未使用(plus根基不牢)竟然连读取txt文件都成了大问题，果断要找时间补课了。

Update 2012.08.15

测试了一下IE各版本下的表现，果然差得惊人。于是对IE进行了特殊处理，包括以下：

1. 把” “(空格)改成” ”
2. “\n”换成”<br />”
3. IE7以下版本对于没有内容的”<br />”会直接忽略，于是只得在前添加一个”&nbsp;”
4. 由于IE不支持ogg格式，当检测到是IE时，跳过音频控制并”建议使用Chrome” XD

Update 21:18

多浏览器支持果然是门学问，这次本以为只有IE会成问题，没想到换成火狐(Firefox)试了试出现了因为字体不是等宽(Monospaced)而产生的严重错位。问题的根源在于之前给pre的标签(tag)在CSS中设置的字体只有一个Courier，这在Win7和iOS上都没问题，可是Firefox并没有这个字体，所以才使用默认字体顶替以至于排版混乱。刚更新的CSS已经添加了6个等宽字体以确保任何系统下都能正常显示。

此外，刚把Chrome的22 Dev版下了来测试发现页面的声音出不来，起因不明，准备再下个21的Beta做对比。