В конечном итоге я хочу сделать запись с микрофона пользователя и загрузить файл на сервер, когда все будет готово. Пока мне удалось создать поток к элементу со следующим кодом:
var audio = document.getElementById("audio_preview");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video: false, audio: true}, function(stream) {
audio.src = window.URL.createObjectURL(stream);
}, onRecordFail);
var onRecordFail = function (e) {
console.log(e);
}
Как мне перейти от этого к записи в файл?
javascript
html
html5-audio
audio-recording
Fibericon
источник
источник
Ответы:
Достаточно полная демонстрация записи доступна по адресу: http://webaudiodemos.appspot.com/AudioRecorder/index.html
Он позволяет вам записывать аудио в браузере, а затем дает вам возможность экспортировать и загружать то, что вы записали.
Вы можете просмотреть источник этой страницы, чтобы найти ссылки на javascript, но, чтобы подвести итог, есть
Recorder
объект, который содержитexportWAV
метод иforceDownload
метод.источник
Авторские права на приведенный ниже код принадлежат Мэтту Даймонду и доступны для использования по лицензии MIT. Исходные файлы находятся здесь:
Сохраните эти файлы и используйте
источник
Обновить сейчас Chrome также поддерживает MediaRecorder API из версии 47. То же самое, что нужно сделать, - это использовать его (догадаться, что собственный метод записи будет быстрее, чем обходные пути), API действительно прост в использовании, и вы найдете множество ответов о том, как загрузить blob для сервера ,
Демо - будет работать в Chrome и Firefox, намеренно не отправляя blob на сервер ...
Исходный код
В настоящее время это можно сделать тремя способами:wav
[весь код на стороне клиента, несжатая запись], вы можете проверить -> Recorderjs . Проблема: размер файла довольно большой, требуется большая пропускная способность для загрузки.mp3
[весь код на стороне клиента, сжатая запись], вы можете проверить -> mp3Recorder . Проблема: лично я считаю качество плохим, также есть проблема с лицензированием.как
ogg
[node.js
код клиент + сервер ( ), сжатая запись, бесконечные часы записи без сбоев браузера], вы можете проверить -> recordOpus , либо только запись на стороне клиента, либо объединение клиент-сервер, выбор за вами.Пример записи ogg (только firefox):
Fiddle Demo для записи ogg.источник
Это простой диктофон и редактор JavaScript. Можешь попробовать.
https://www.danieldemmel.me/JSSoundRecorder/
Можно скачать отсюда
https://github.com/daaain/JSSoundRecorder
источник
Вот проект gitHub, который делает именно это.
Он записывает звук из браузера в формате mp3 и автоматически сохраняет его на веб-сервере. https://github.com/Audior/Recordmp3js
Вы также можете просмотреть подробное объяснение реализации: http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
источник
Вы можете использовать Recordmp3js из GitHub для достижения ваших требований. Вы можете записать с микрофона пользователя, а затем получить файл в формате mp3. Наконец загрузите его на свой сервер.
Я использовал это в своей демонстрации. Уже есть образец, доступный с исходным кодом от автора в этом месте: https://github.com/Audior/Recordmp3js
Демо находится здесь: http://audior.ec/recordmp3js/
Но пока работает только в Chrome и Firefox.
Кажется, работает нормально и довольно просто. Надеюсь это поможет.
источник
getUserMedia()
работает только с безопасным происхождением (https, localhost), начиная с Chrome 47Потоковая передача звука в реальном времени, не дожидаясь окончания записи: https://github.com/noamtcohen/AudioStreamer
Это передает данные PCM, но вы можете изменить код для потоковой передачи mp3 или Speex
источник