JavaScriptとswfを使って、Webでサウンドを録音してみましょう。

ここではWAMI（wami-recorder）を使ってみます。

小さなライブラリーですが、簡単な録音ならOKです。

録音用のアプリケーションならいくらもありますが、Webサービスと連携する場合は、アップロードなどの手間がかかります。

これなら、録音とサービスを連携できるので、なにかと便利。

使い方

WAMIの公式サイトはこちら。

wami-recorder

作成の仕方は比較的簡単ですが、動作させるにはPHPが使えるWebサーバーが必要です。

【クライアント側】

HTML + JavaScript

公式サイトあるように、必要なファイルは以下の４つ。

Wami.swf
recorder.js
gui.js
buttons.png

こちらからもダウンロードできます

これらのファイルは下のindex.htmlと同じディレクトリに置いておきます。

例として、Webサーバーのドメインは「http://example.com」として、録音で作成されたWAVファイルは「record_data」というフォルダーに置かれるとします。

録音されたファイルを保存するサーバー側のPHPファイルを「record.php」とします。

index.html

下記のコードは、オリジナルに若干手を加えています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- swfobject is a commonly used library to embed Flash content -->
<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<!-- Setup the recorder interface -->
<script type="text/javascript" src="recorder.js"></script>

<!-- GUI code... take it or leave it -->
<script type="text/javascript" src="gui.js"></script>

<script>
    var wavfilename = "sample";

    function setupRecorder() {
        Wami.setup({
            id : "wami",
            onReady : setupGUI
        });
    }

    function setupGUI() {
        gui = new Wami.GUI({
            id : "wami",
            recordUrl : "https://wami-recorder.appspot.com/audio",
            playUrl : "https://wami-recorder.appspot.com/audio"
        });

        gui.setPlayEnabled(false);
    }
    
    function startRecorder(){
        //再生用に、wavファイルのURLを登録
        gui.setPlayUrl("http://example.com/record_data/" + wavfilename + ".wav");
        //録音start
        Wami.startRecording("http://example.com/record.php?name=" + wavfilename + ".wav");
    }
    
    function stopRecorder(){
        //録音stop
        Wami.stopRecording();
        
    }
    
</script>

</head>

<body onload="setupRecorder()">
    
    
    <div id="wami" style="margin-left: 50px;"></div>
    <noscript>WAMI requires Javascript</noscript>
    
    
    
    <div style="position: absolute; left: 100px; top: 10px; font-family: arial, sans-serif; font-size: 82%">
        WAMI Sound Recorder
        <br>
    </div>
    
    <div id="controler" style="top:150px;left:100px;position:absolute;border:1px solid blue;">
        
        <input type="button" value="Start" onClick="startRecorder()">
        
        <br>
        
        <input type="button" value="Stop" onClick="stopRecorder()">
        
    </div>
    
</body>



</html>

【サーバー側】

record.php

<?php
    parse_str($_SERVER['QUERY_STRING'], $params);
    $name = isset($params['name']) ? $params['name'] : 'output.wav';
    
    $content = file_get_contents('php://input');
    
    $fh = fopen("record_data/" . $name, 'w') or die("can't open file");
    fwrite($fh, $content);
    fclose($fh);
?>

出力されるファイル形式はwav。

フォーマットは
サンプリングレート 22.05kHz
量子化ビット 16ビット
モノラル

のようです。

TOP

サンプル

WAMI Sound Recorder

初回では、Adobe Flash Playerがマイクへのアクセスを許可するかどうか聞いてきます。許可してください。

左が録音ボタン、右が再生ボタン

ただし、録音ボタンは押しても押さなくても影響ないようです。

Startボタンで録音が開始されます。Stopボタンを押すまで音声ファイルは生成されません。

Stop後、約３秒待ちでダウンロード用のリンクが表示されます。右クリックで保存。

再生ボタンは少しレスポンスが悪いですので御注意。

注
このサイトで作成された音声ファイルのライフサイクルは"一応"２４時間です。
また、論外に大きなファイルは気づき次第削除しますんで、よろしくお願いします。

TOP

スポンサー　リンク

トップページ| サイトマップ|

Webサービスでサウンドを録音してみる

使い方

サンプル