9

html5で音を録音することはまだ可能ですか? Chrome の最新のカナリア バージョンをダウンロードし、次のコードを使用します。

navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia; navigator.getUserMedia({audio: true}, gotAudio, noStream);

これにより、ユーザーは音声録音を許可するように求められます。「はい」と答えると、chrome が録音中であることを示すメッセージが表示されます。しかし、生データを含むオーディオ バッファにアクセスすることは可能ですか? 方法を見つけることができないようです。まだ実装されていない提案された仕様がありますが、実際にどのブラウザでも実行できるかどうかを知っている人はいますか?

4

3 に答える 3

3

Webkit と Chrome オーディオ API のサポートは記録されていますが、API が進化するにつれて、それらを使用するコードを維持することが難しくなります。

Sink.js というアクティブなオープンソース プロジェクトでは、記録が可能で、未加工のサンプルをプッシュすることもできます: https://github.com/jussi-kalliokoski/sink.js/。このプロジェクトは非常に活発であるため、Webkit と Chrome の変更が発表されるたびに最新の状態を維持することができました。

于 2012-08-15T18:34:25.270 に答える
2

ここで私の例を見つけることができますが、(部分的に) 機能していません。AUDIO レコーディングはまだ chrome に実装されていないためです。そのため、BLOB が見つからないという 404 エラーが発生します。

また、その下にフォームがありますが、それは私の目的がその BLOB を php ファイルに送信することだったからですが、機能しないため、試すことができません。保存して、後で使用できます。

<audio></audio>
<input onclick="startRecording()" type="button" value="start recording" />
<input onclick="stopRecording()" type="button" value="stop recording and play" />
<div></div>
<!--
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
-->

<script>
  var onFailed = function(e) {
    console.log('sorry :(', e);
  };

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia || 
var localStream

var audio = document.querySelector('audio');
var stop = document.getElementById('stop');


    function startRecording(){
        if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true, video: false, toString : function() {return "video,audio";}}, function(stream) {
            audio.src = window.URL.createObjectURL(stream);
        document.getElementsByTagName('div')[0].innerHTML = audio.src;
            localStream = stream;
          }, onFailed);
        } else {
            alert('Unsupported');
          //audio.src = 'someaudio.ogg'; // fallback.
        }
    }



    function stopRecording(){
        localStream.stop();
        audio.play();
    }


    function sendAudio(){

    }
</script>

注: Firefox に関する情報とハウツー: https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

于 2012-09-27T09:30:16.537 に答える
0

Audio context API と getChannelData() を使用してオーディオ バッファにアクセスできるようになりました。

これは、音声を MP3 形式で直接録音し、Web サーバーに保存する gitHub のプロジェクトです: https://github.com/nusofthq/Recordmp3js

Recorder.js では、次のようにチャネルごとにオーディオ バッファに個別にアクセスする方法を確認できます。

this.node.onaudioprocess = function(e){
      if (!recording) return;
      worker.postMessage({
        command: 'record',
        buffer: [
          e.inputBuffer.getChannelData(0),
          //e.inputBuffer.getChannelData(1)
        ]
      });
    }

実装のより詳細な説明については、次のブログ投稿を読むことができます: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/

于 2014-03-27T09:35:19.723 に答える