タグ

ブックマーク / yanagia.hatenadiary.org (2)

  • JavaScriptで波をつくろう。リアルタイム波形生成&再生 - Yanagi Entertainment

    前のエントリでこんなことを書きました。 JavaScriptで波形データを読み書きすることができる。しかし再生するのは難しい。 HTML5のaudioタグとData URIを組み合わせればできないこともないが、コストが大きすぎる。 コストが大きいのは音声ファイルが大きいからです。50MBある波形をいちいち変換してられません。 でも小さい波形ならできるかもしれない! ということでやってみました。 基的なアイディア 波形データをつくる(数値の配列) 波形をバイナリ列に変換する バイナリ列にWAVヘッダを付加する Base64エンコード audioタグのsrc属性に指定 audioを再生 つくったもの http://yanagiatool.appspot.com/jsaudio/mmltest.html シンプルなMMLプレイヤーです。JavaScript + HTML5。 ベロシティとかルー

    JavaScriptで波をつくろう。リアルタイム波形生成&再生 - Yanagi Entertainment
    kurumigi
    kurumigi 2010/03/24
    『リアルタイムレンダリング』:音ごとにwavを生成しそれぞれタイマーで再生。かなり無理がある/『オフラインレンダリング』:結合したwavを再生。『リアルタイムだと勘違いさせる程度の処理速度は実現できそう』
  • JavaScriptでwavファイルを読み込んで波形表示するサンプル - Yanagi Entertainment

    動画でリッチなことできるんなら音声でもできるんじゃね? と思ったので書いてみました。 http://yanagiatool.appspot.com/jsaudio/load.html (FireFox3.6系列のみ) ローカルからwavファイルを画面にドラッグアンドドロップしてみてください。ゆっくり波形が表示されます。 読み込めるwavファイルの形式は16bitステレオのみです。 仕組み File APIを使ってます。 FileReaderでファイルの中身をStringとして読み込んで、ヘッダをチェックして、データ部を適当にエンディアン変換しながら表示してます。 File APIの使い方やバイナリの扱い方などは W3C File APIを使ってJavaScriptでファイル加工 - しばそんノート http://d.hatena.ne.jp/shibason/20100111/126319

    JavaScriptでwavファイルを読み込んで波形表示するサンプル - Yanagi Entertainment
  • 1