Я использую WebRTC вместе с WebAudioRecorder.js и API Web Audio для записи микрофонного ввода от пользователя для распознавания звука с помощью audD API (аналогично Shazam). Это прекрасно работает в Chrome и Firefox, и кажется, что качество записи довольно хорошее. Однако audD не может распознать блоб / файл, отправленный из моей записи в Safari (11.1.2), из-за того, что я предполагаю, это низкое качество звука (воспроизведение почти не слышно). Единственный аудиоформат, с которым совместимы Safari и audD, - это mp3, поэтому я так кодировал файл.
Javascript:
// to be set to a WebAudioRecorder.js recorder instance
let recorder;
// to be set to the stream resulting from getUserMedia()
let gumStream;
function beginRecording() {
if (navigator.mediaDevices.getUserMedia) {
console.log('starting the recording');
navigator.mediaDevices.getUserMedia({ 'audio': true })
.then(function(stream) {
let AudioContext = window.AudioContext // Default
|| window.webkitAudioContext // Safari and old versions of Chrome
|| false;
if (AudioContext) {
let audioCtx = new AudioContext;
gumStream = stream;
let source = audioCtx.createMediaStreamSource(stream);
recorder = new WebAudioRecorder(source, {
workerDir: 'web-audio-recorder-js/lib/',
encoding: 'mp3'
});
} else {
alert('The Web Audio API is not supported.');
}
recorder.setOptions({
timeLimit: 120,
encodeAfterRecord: true,
ogg: {quality: 0.9},
mp3: {bitRate: 320},
});
recorder.startRecording();
recorder.onComplete = function(recorder, blob) {
createAudioPlayback(blob);
POSTreq(blob);
}
recorder.onError = function(recorder, err) {
console.error(err);
}
})
.catch(function(err) {
console.error(err);
})
}
}
function stopRecording() {
console.log('stopping the recording');
let recordingTime = recorder.recordingTime();
console.log(recordingTime);
let audioTrack = gumStream.getAudioTracks()[0];
console.log(audioTrack);
audioTrack.stop();
recorder.finishRecording();
$('#msg_box').text(`Recorded for ${Math.round(recordingTime)} seconds`);
console.log('recording stopped');
}
function createAudioPlayback(blobData) {
let url = URL.createObjectURL(blobData);
$('body').append(`<audio controls src="${url}"></audio>`);
}
function POSTreq (blobData) {
let xhr = new XMLHttpRequest();
let fd = new FormData();
fd.append('api_token', '');
fd.append('file', blobData);
fd.append('method', 'recognize');
fd.append('return_itunes_audios', true);
fd.append('itunes_country', 'us');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
parseRetrievedData(xhr.response);
}
}
xhr.open('POST', 'https://api.audd.io/');
xhr.responseType = 'json';
xhr.send(fd);
}
function parseRetrievedData(parseData) {
console.log('the data from the audD api is: ', parseData);
}
$(function() {
$('#start-button').click(function(e) {
beginRecording();
$('#stop-button').prop('hidden', false);
});
$('#stop-button').click(function(e) {
stopRecording();
});
});
HTML:
<div class="recorder_wrapper">
<div class="recorder">
<button id="start-button">Start</button>
<button id="stop-button">Stop</button>
<p id="msg_box"></p>
<section class="auth-links-region" role="region">
<a href="#" class="auth-link signup">Signup</a>
<a href="#" class="auth-link login">Login</a>
</section>
<section class="authentication-region" role="region" hidden>
<p class="authentication-text"></p>
<a href="#" class="mysearches-link">My Searches</a>
<a href="#" class="logout-link">Logout</a>
</section>
</div>
</div>