読者です 読者をやめる 読者になる 読者になる

読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

オフラインでも使える効果音再生

JavaScript

以下はクリック音を出すサンプル。keySound.play()で音が出ます。

keySound =
  _context: new webkitAudioContext()
  play: ->
    return unless keySound._buffer?
    source = keySound._context.createBufferSource()
    source.buffer = keySound._buffer
    source.connect keySound._context.destination
    source.noteOn 0

keySound._context.decodeAudioData Base64Binary.decodeArrayBuffer("""
        Rk9STQAAAi5BSUZGQ09NTQAAABIAAQAAAQAAEEAOrEQAAAAAAABTU05EAAACCAAA
        AAAAAAAAAAAAAAAA//8AAv/9AAX/+gAFAXz/Kv7I/pj+4ANhBbQIWwbqAPX5ne/l
        6Zjo9PCM+xwJHRa+HmMh6BtHDR32Wd6MzinKZNgA8XUNIiawNzc6XC0UEW3xGtN+
        wBi978pp6MAPqTWXTZhTBD7KFgLnkLq9pcWoksX+9YQs+FqfbaBkXDxaA6bODqfV
        nrq0w+CbGOxLuWuoZ+9COgHmwuGT5YExkaO85PZ1MddbL2oQXr46SQcG2Ka4mLNZ
        wkHhKwmnMRtKlE9hPP4YX+3RyBCu2atkvpbepgPYKohD9EvIQl8kzgKK4dXI+8Ls
        zrPsCg9hKbE6ADicKQUMlOinyZK137iCy7XsbRH7MOtCWUXkOe4h6Ag+7b7bt9Sk
        1mHjDPWbCFQWaRnZF28OtgOP9lvqiOQu5ajwFv8ODC4XnxuLGWUTOQoA/6f49Pak
        96j6Afpg+Vv5Pvm7+nf4U/z/BJgRDRu+HYMW9wiE+AzpOOEX4bnrM/obDCsdtyYK
        IYwRPvuB51neRtuk4tvxlAQ1Fn4kLCbJHpAQSv+M8sbpnOb86kL1OgKIDm0VFRVH
        EVULiAXn/4b44/Qv9K75JP8sA+0HHwaSCXQLKQesAcv//AAF//wAAgAA//0ABP/9
        AAP//QAC//8AAAAC//wABf/7AAT//QAC//8AAf/9AAX/+QAH//s=
        """)
    , (buffer) -> keySound._buffer = buffer

説明

0. https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js を利用しているので、htmlにてbase64-binary.jsをscriptタグでロードすること。
1. audioタグは再生のレスポンスが悪いので、iOS6から利用可能になったWeb Audio APIを利用。
2. iOS Safariでは音声ファイルをアプリケーションキャッシュに入れられないので、base64エンコードしてソースコードに埋める。
3. オーディオバッファは使い回しが可能。再生するときはオーディオソースノードを生成して、先にデコードしたオーディオバッファを割り当て、再生する。

(注) base64エンコードした音声はaiffフォーマットです。なのでこの例はSafari以外のブラウザでは鳴らない可能性が高いです。他のブラウザで試したい時には、wavファイルをbase64してください。