HTML5で三線を作ってみた
2013
03/12
(火)
19:59
三線の日（３月４日）でネタで作ってみようかと...
しかしバグだらけで終わった。
頑張ってもう一度１から作った。
・iOS6のiPhone,iPodTouch
・パソコンはChrome
でプレイできると思います。
音質が悪いですがよかったら使ってください。
あと、三線には詳しくないので悪しからず；
--------------------
使った技術、ライブラリとか
・apple-mobile-web-app-capable（navigator.standalone）
・manifest（＜html manifest="cache.manifest"＞）
・WebAudioAPI
・JS: howler.js（Audio鳴らすやつ）
・JS: base64-binary.js（base64をdecodeするやつ）
iOSでいろいろこけました。
cache.manifestにサウンドファイルのパスを記述してもキャッシュしないようです。
http://www.ibm.com/developerworks/library/wa-ioshtml5/index.html#list7
なので、mp3,ogg,wavをbase64化したものもをJS内に書いて、
iOSだけらしいので、ライブラリ「howler.js」のソース中に、
if(isIOS){}とか判別してbase64-binary.js使って
sc = Base64Binary.decodeArrayBuffer(str_base64_sound);
ctx.decodeAudioData(sc, function(buffer) {...
と追記し、base64文字で読み込むようにしたりしました。
とりあえず、オフラインコンテンツで動く。はず。