web-dev-qa-db-ja.com

javascript / html5を介してwavオーディオバイト配列を再生する方法は？

次の方法を使用して、wavデータを含むバイト配列を再生しています。この関数はGWTプロジェクトから呼び出されています。

この機能は音を再生しますが、ある種の地獄の怪物のように聞こえます。サンプルレートは間違いなく正しく（サウンドはneospeechによって生成されています）、numberOfSamplesのすべての種類の値を試しました。これは、オーディオデータの長さを表しているようです。

NumberOfSamplesの値が30000を超えると、オーディオファイルの全長が再生されますが、文字化けしてひどいものになります。

だから、私は何が間違っているのですか？

function playByteArray(byteArray, numberOfSamples) {
    sampleRate = 8000;

    if (!window.AudioContext) {
        if (!window.webkitAudioContext) {
            alert("Your browser does not support any AudioContext and cannot play back this audio.");
            return;
        }
        window.AudioContext = window.webkitAudioContext;
    }

    var audioContext = new AudioContext();

    var buffer = audioContext.createBuffer(1, numberOfSamples, sampleRate);
    var buf = buffer.getChannelData(0);
    for (i = 0; i < byteArray.length; ++i) {
        buf[i] = byteArray[i];
    }

    var source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start(0);
}
javascripthtmlgwtwavaudiocontext
13
breakspirit

私は自分の質問で説明したことをどのように行うかを考え出し、他の人の利益のためにそれを投稿すべきだと思いました。コードは以下のとおりです。 playByteArrayを呼び出して、pcmwavデータを含むバイト配列を渡します。

window.onload = init;
var context;    // Audio context
var buf;        // Audio buffer

function init() {
if (!window.AudioContext) {
    if (!window.webkitAudioContext) {
        alert("Your browser does not support any AudioContext and cannot play back this audio.");
        return;
    }
        window.AudioContext = window.webkitAudioContext;
    }

    context = new AudioContext();
}

function playByteArray(byteArray) {

    var arrayBuffer = new ArrayBuffer(byteArray.length);
    var bufferView = new Uint8Array(arrayBuffer);
    for (i = 0; i < byteArray.length; i++) {
      bufferView[i] = byteArray[i];
    }

    context.decodeAudioData(arrayBuffer, function(buffer) {
        buf = buffer;
        play();
    });
}

// Play the loaded file
function play() {
    // Create a source node from the buffer
    var source = context.createBufferSource();
    source.buffer = buf;
    // Connect to the final output node (the speakers)
    source.connect(context.destination);
    // Play immediately
    source.start(0);
}
21
breakspirit

クリーンアップの提案：

function playByteArray( bytes ) {
    var buffer = new Uint8Array( bytes.length );
    buffer.set( new Uint8Array(bytes), 0 );

    context.decodeAudioData(buffer.buffer, play);
}

function play( audioBuffer ) {
    var source = context.createBufferSource();
    source.buffer = audioBuffer;
    source.connect( context.destination );
    source.start(0);
}
3
MrBones

このアプローチは、AudioContextと比較して最新のiOSサファリで機能します。オーディオオブジェクトは、タップ/クリック（ユーザーインタラクション）イベントで作成する必要があるため、リクエストコールバックでは作成しないでください。

const audio = new Audio()    
fetch(url, options) // set content header to array buffer
      .then((response) => {
        var blob = new Blob([response.value], { type: 'audio/mp3' })
        var url = window.URL.createObjectURL(blob)        
        audio.src = url
        audio.play()
      })

ここ からのスニペット

2
Ievgen Martynov