При подготовке к созданию веб-интерфейса чата у вас должны быть смайлы, картинки и загруженные файлы. Забудьте о видео, вам все равно понадобится голос.
В этой статье записана онлайн-запись и выгрузка на сервер с помощью Recorder на GitHub на веб-странице.
код записиЭтот пример кода поддерживает использование на ПК, Android и IOS (только Safari). Если вы используете RecordApp, вы можете добавить поддержку IOS (браузер WeChat, апплет).
Лучше действовать один раз, чем читать код тысячи раз. Создайте новый HTML-файл, скопируйте в него следующие три фрагмента кода и дважды щелкните браузер, чтобы открыть его для тестирования.
<!-- Сначала загрузите библиотеку записи js. Примечание. Вам следует клонировать js локально для использования --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder. mp3.min.js></script><input type=button onclick=startRec() value=Начать запись><hr><input type=button onclick=playRec() value=Завершить и воспроизвести><input type=button onclick=uploadRec() value=Завершить и загрузить><script>var Rec;function startRec(){ Rec=Recorder();//Использовать конфигурацию по умолчанию, формат mp3//Открыть Авторизация микрофона для получения связанных ресурсов. //Пользователю отказано в разрешении или браузер не поддерживает alert((isUserNotAllow? Пользователю отказано в разрешении, :)+невозможно записать:+msg });};</script> Загрузить код сервера <script>function uploadRec(){ //Остановить запись и получить двоичный объект BLOB-объекта записываемого файла. Вы можете делать все, что захотите. Rec.stop(function(blob,duration){ /* объект BLOB-файла, который можно прочитать с помощью. FileReader Content или загрузка с использованием FormData. В этом примере двоичный файл загружается напрямую. Для загрузки обычной формы application/x-www-form-urlencode см. пример в github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); //Он ничем не отличается от обычной формы. Бэкэнд получает файл с параметром upfile и именем файла Recorder.mp3 //Используйте ajax для прямой загрузки var. xhr = новый XMLHttpRequest (); xhr.open(POST, http://baidu.com/, измените его на свой адрес загрузки);//Этот поддельный адрес может видеть данные и формат запроса в сети консоли, результат запроса не имеет значения xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){ alert(xhr.status==200?Загрузка прошла успешно: для проверки сначала откройте консоль браузера, а затем повторите запись. На вкладке «Сеть» вы можете увидеть загрузку. запросить данные и отформатировать); xhr.send(form); },function(msg){ alert(ошибка записи:+msg });};</script> Воспроизвести код сейчас <script>function playRec(){ //Остановим запись, получим двоичный объект blob файла записи, сделаем все, что пожелаем Rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio.controls= true; document.body.appendChild(audio); // Получить URL-адрес аудио BLOB-объекта audio.src=URL.createObjectURL(blob); },function(msg){ alert(не удалось записать:+msg });};</script>-------------------------------------------------- ----------------------------------
РегистраторАдрес GitHub: https://github.com/xiangyuecn/Recorder.
Онлайн-тест: Нажмите здесь, чтобы протестировать
Recorder используется для записи HTML5. Это чистая библиотека js, которая поддерживает большинство браузеров мобильных устройств и ПК, в которых реализована функция getUserMedia, включая ядро Tencent Android X5 (QQ, WeChat).
По умолчанию запись выводится в формате mp3, а формат wav является необязательным (файл записи в этом формате очень большой, ограниченная поддержка форматов ogg, webm и amr (при наличии соответствующего кодировщика); ).
Компактность: если нет особых требований к размеру файла записи, можно просто использовать ядро записи + кодировщик wav. Исходный код составляет менее 300 строк, а сжатый файл Recorder.wav.min.js — менее 4 КБ. . MP3 кодируется с помощью lamejs, а сжатый файл Recorder.mp3.min.js имеет размер 54 КБ после включения gzip.
Поскольку только Safari поддерживает getUserMedia на IOS (11. Браузер, веб-просмотр мини-программы), а RecordApp также обеспечивает лучшую поддержку гибридного приложения.
Поскольку RecordApp требует общедоступной учетной записи WeChat (по подписке) для обеспечения поддержки записи JsSDK, разработка будет более сложной, но она поддерживает больше сред. Рекордер можно использовать прямо из коробки. Какой из них использовать, смотрите в таблице ниже:
| поддерживать | Регистратор | RecordApp |
|---|---|---|
| браузер для ПК | √ | √ |
| Android-браузер | √ | √ |
| Android WeChat (включая мини-программы) | √ | √ |
| Гибридное приложение для Android | √ | √ |
| IOS Сафари | √ | √ |
| IOS WeChat (включая мини-программу) | √ | |
| Гибридное приложение для iOS | √ | |
| Другие браузеры для IOS | ||
| Сложность разработки | Простой | сложный |
| сторонние зависимости | никто | Положитесь на официальный аккаунт WeChat |
* Вы можете проверить исходный код RecordApp на github, который находится в каталоге xiangyuecn/Recorder/app-support-sample .
Выше представлена запись веб-страницы HTML5 и загрузка на сервер, представленная редактором. Она поддерживает функцию WeChat для ПК, Android и IOS. Если у вас есть какие-либо вопросы, оставьте мне сообщение и укажите. Редактор ответит вам в ближайшее время. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!
Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!