女子小学生と××したい

Webフロントエンド界のゴミクソメンヘラであり続けたい

iOS6 safari向けにweb audio APIのアプリケーションを作るときにつまずきそうなこと

web audio APIを用いたiOS6 safari対応の仮想音源位置の移動があんまり上手くいかなかった話 - 女子小学生と××したいの追記、というかスマホ対応のときに思ったことです。

そもそもなんであのコード書こうと思ったかという話が絡んでくるのですが
音が好きで、かつフロントエンドエンジニアを始めたのでまぁ、この2つを絡めたものは作りたいなぁと思っていて
web audio APIっつう、新しくて未開拓で面白そうなもんが転がってるなーってのは知ってて
でも、手っ取り早く始めるならflashで良かったんすよね、基盤が出来上がってるし色んなことできるし

ただ、「音が好き」「ブラウザの中が好き」ともう1つ「スマホがこれからすげー面白くなる」ってのがあって
正直PCブラウザの中はやり尽くされた感があるって勝手に感じてます
PCブラウザの中でリッチな表現するのにわざわざjsを選ぶ理由ってそんなになくて、flashでいいじゃんって話になるけど
去年からフロントを始めた僕が「今から」flashを勉強するのはいかがなんかなぁ、と思いました
flashエンジニアのみなさんごめんなさい

まとめますと、「音が好き」「ブラウザの中が好き」「スマホにリッチなコンテンツを」「flashをガッツリ勉強するには遅すぎた」という4つの理由から、web audio APIで遊ぶことを選びました。
「音が好き」とざっくり言いましたが、もっと言うと空間音響と音楽音響です。好きとは言ったもののそこまで物を知ってるわけでもないです。
あのjsdo.itのコードも特に発展性や、これから爆発するアイデアがあるわけでもなくただの練習用なのですよ。

というわけで長くなってしまいましたが解説に入ります。

iOSのバージョンが6系に上がり、safariがweb audio APIに対応したという話を聞いてそれはそれは喜んだわけですが。
僕の調査から得られた主観的な意見なので本当かどうかを確かめる手段もないと思いますが、iOS6 safariはweb audio APIに完全対応はできていない感じだと思います。「んなもん当たり前だろなんだこいつ」と思われたら机で殴りに来てください。

web audio APIにはcreateBufferSourceというメソッドが用意されており、wav、mp3、ogg等から作ったarraybufferをAudioBufferSourceNode.bufferに突っ込んで再生することができます(参考:Web Audio APIで立体音響 - jsdo.it - Share JavaScript, HTML5 and CSS)。
で、ここからは完全に僕の予想になるのですが、このAudioBufferSourceNodeがiOS6 safariに未対応なのではないかと感じています。ちなみに↑のryoheyccさんのコードはiOS6 safariでは動作しません。具体的には、音が鳴りません。

僕が投稿したコードなんですが、当初はAudioBufferSourceNodeを使ってSVG女子のテーマ曲の仮想音源位置をぐりぐり回そうと思っていました。
が、この問題に当たってしまいました。iOS6 safariで音が鳴るコードはいくつか公開されています

iOS6 の Web Audio API を使う - 音の鳴るブログ
The Rise of the Mobile Web (and Web Audio on iOS 6)

しかしAudioBufferSourceNodeを使ってiOS6 safari対応のアプリケーションを作った例が見つからなかったため、今回はcreateJavaScriptNodeで作ったnodeに乱数配列を突っ込んで白色雑音を再生するという手法を取っています。
今回作ってみて色々なものを色々試したんですが、どうにもまだiOS端末に対応し切れていないweb audio APIのnodeはありそうな感じがしています。

というわけで、iOS6 safariでweb audio APIを用いて音の表現を入れたいけど上手くいかないなぁ、という問題に当たった方は「そもそも対応していない」という選択肢を持ってみるのもいいんじゃないかなぁ、というなんだこれ酷い記事だなこれ。まぁいいや。

ファイルから作ったarraybufferをjavascriptNodeになんとか突っ込めればそれも解決すると思うので、それはこれから作ります。

長くなってしまったので今回はこのぐらいで。このコードについてはまだ書きたいことが2、3個あるのでだらだら書いていこうと思います。それでは失礼します