172 lines
6.4 KiB
HTML
172 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Ogg Opus Encoder Example</title>
|
|
<script src="../vendor/opus-recorder/recorder.js"></script>
|
|
<style type='text/css'>
|
|
ul { list-style: none; }
|
|
li { margin: 1em; }
|
|
audio { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Encoder example</h1>
|
|
<p>Before you enable monitoring, make sure to either plug in headphones or turn the volume down.</p>
|
|
<p>This ogg opus implementation does not support more than 2 channels.</p>
|
|
|
|
<h2>Options</h2>
|
|
|
|
<div>
|
|
<label>monitorGain</label>
|
|
<input id="monitorGain" type="number" value="0" />
|
|
</div>
|
|
|
|
<div>
|
|
<label>numberOfChannels</label>
|
|
<input id="numberOfChannels" type="number" value="1" />
|
|
</div>
|
|
|
|
<div>
|
|
<label>encoderSampleRate</label>
|
|
<input id="encoderSampleRate" type="number" value="48000" />
|
|
</div>
|
|
|
|
<div>
|
|
<label>bitRate</label>
|
|
<input id="bitRate" type="number" value="64000" />
|
|
</div>
|
|
|
|
<h2>Commands</h2>
|
|
<button id="start">start</button>
|
|
<button id="pause" disabled>pause</button>
|
|
<button id="resume" disabled>resume</button>
|
|
<button id="stopButton" disabled>stop</button>
|
|
|
|
<h2>Recordings</h2>
|
|
<ul id="recordingslist"></ul>
|
|
|
|
<h2>Log</h2>
|
|
<pre id="log"></pre>
|
|
|
|
<script>
|
|
function screenLogger(text, data) {
|
|
log.innerHTML += "\n" + text + " " + (data || '');
|
|
}
|
|
|
|
if (!Recorder.isRecordingSupported()) {
|
|
screenLogger("Recording features are not supported in your browser.");
|
|
}
|
|
|
|
else {
|
|
var recorder = new Recorder({
|
|
monitorGain: parseInt(monitorGain.value, 10),
|
|
numberOfChannels: parseInt(numberOfChannels.value, 10),
|
|
encoderBitRate: parseInt(bitRate.value,10),
|
|
encoderSampleRate: parseInt(encoderSampleRate.value,10),
|
|
encoderPath: "../vendor/opus-recorder/encoderWorker.js",
|
|
|
|
bufferLength: 0,
|
|
encoderFrameSize: 10,
|
|
streamPages: true,
|
|
maxBuffersPerPage: 1
|
|
});
|
|
|
|
pause.addEventListener( "click", function(){ recorder.pause(); });
|
|
resume.addEventListener( "click", function(){ recorder.resume(); });
|
|
stopButton.addEventListener( "click", function(){ recorder.stop(); });
|
|
start.addEventListener( "click", function(){
|
|
recorder.start().catch(function(e){
|
|
screenLogger('Error encountered: ' + e.message );
|
|
});
|
|
});
|
|
|
|
recorder.onstart = function(e){
|
|
screenLogger('Recorder is started');
|
|
start.disabled = resume.disabled = true;
|
|
pause.disabled = stopButton.disabled = false;
|
|
};
|
|
|
|
recorder.onstop = function(e){
|
|
screenLogger('Recorder is stopped');
|
|
start.disabled = false;
|
|
pause.disabled = resume.disabled = stopButton.disabled = true;
|
|
};
|
|
|
|
recorder.onpause = function(e){
|
|
screenLogger('Recorder is paused');
|
|
pause.disabled = start.disabled = true;
|
|
resume.disabled = stopButton.disabled = false;
|
|
};
|
|
|
|
recorder.onresume = function(e){
|
|
screenLogger('Recorder is resuming');
|
|
start.disabled = resume.disabled = true;
|
|
pause.disabled = stopButton.disabled = false;
|
|
};
|
|
|
|
//X
|
|
var decoderWorker = new Worker('../vendor/opus-recorder/decoderWorker.js');
|
|
decoderWorker.postMessage({
|
|
command:'init',
|
|
decoderSampleRate: parseInt(encoderSampleRate.value,10),
|
|
outputBufferSampleRate: parseInt(encoderSampleRate.value,10)
|
|
});
|
|
|
|
const audioContext = new AudioContext();
|
|
const speakers = audioContext.destination;
|
|
const audioBuffer = audioContext.createBuffer(1, parseInt(encoderSampleRate.value,10), parseInt(encoderSampleRate.value,10));
|
|
decoderWorker.onmessage = function(e){
|
|
|
|
// null means decoder is finished
|
|
if (e.data === null) {
|
|
console.log("DONE!");
|
|
}
|
|
|
|
// e.data contains decoded buffers as float32 values
|
|
else {
|
|
console.log("Data: ");
|
|
console.log(e);
|
|
audioBuffer.getChannelData(0).set(e.data[0]);
|
|
const source = audioContext.createBufferSource();
|
|
source.buffer = audioBuffer;
|
|
source.connect(speakers);
|
|
source.start();
|
|
}
|
|
};
|
|
|
|
recorder.ondataavailable = function( typedArray ){
|
|
console.log("Page");
|
|
//console.log(typedArray);
|
|
decoderWorker.postMessage({
|
|
command: 'decode',
|
|
pages: typedArray
|
|
}, [typedArray.buffer] );
|
|
|
|
/*
|
|
var dataBlob = new Blob( [typedArray], { type: 'audio/ogg' } );
|
|
var fileName = new Date().toISOString() + ".opus";
|
|
var url = URL.createObjectURL( dataBlob );
|
|
|
|
var audio = document.createElement('audio');
|
|
audio.controls = true;
|
|
audio.src = url;
|
|
|
|
var link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = fileName;
|
|
link.innerHTML = link.download;
|
|
|
|
var li = document.createElement('li');
|
|
li.appendChild(link);
|
|
li.appendChild(audio);
|
|
|
|
recordingslist.appendChild(li);
|
|
*/
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|