С появлением социальных приложений, таких как WeChat, голосовой чат стал обязательной функцией для многих приложений: от социальных приложений, использующих голосовой чат в качестве основной функции, до приложений электронной коммерции с голосовым обслуживанием клиентов и функциями голосового официанта в магазине. чат стал незаменимым.
Однако многие люди считают, что голосовая связь на стороне веб-сайта далека от нас, и это скорее работа локальных приложений. На самом деле это не так. С развитием Html5 голосовая функция постепенно стала одной из самых важных. обязательные функции во внешнем интерфейсе.
Зачем нам изучать голос HTML5?1. Спецификация Html5 развивается, а обновления мобильных телефонов ускорили обновление операционной системы. Голосовая функция станет одной из основных задач внешнего интерфейса, как и текущий холст. Фронтальная реализация разработки голосовых функций происходит быстрее и экономит больше рабочей силы (это означает экономию денег для начальника, а экономия денег для начальника дает прибавку к зарплате себе)
2. Даже если локальные приложения теперь имеют голосовые функции, знание различных подводных камней голосового взаимодействия может помочь вашим коллегам иметь более гармоничные отношения и более плавное сотрудничество вместо того, чтобы сражаться друг с другом.
3. Понимание новых технологий может предотвратить собеседования, а во-вторых, вы можете предсказать технологические тенденции, чтобы вам не приходилось изучать кучу навыков убийства драконов или придерживаться правил. Это более способствует поддержанию ваших знаний и профессиональной конкурентоспособности. вершина пищевой цепи.
4. Большинство людей, работающих с интерфейсом, неправильно понимают голосовую функцию. Они думают, что голосовая функция — это всего лишь аудиотег HTML5. На самом деле все не так просто.
Не так много чернил, давайте просто разработаем небольшой проект и все будет понятно. Сначала посмотрим на рендеры.
буфер обмена.png
Бизнес-логика очень проста,
Это точно так же, как наш метод WeChat. Когда вы нажимаете, слово будет отпущено, и речь будет записана. Когда вы отпустите, оно будет нажато, чтобы завершиться, и голос будет отправлен на устройство. другая сторона одновременно.
Давайте сделаем это шаг за шагом. Сначала давайте закончим HTML-страницу.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>WeChat Voice</title> <link rel=stylesheet href=css/record.css></head><body> <div id=wrap> <header id=header> <div id=left> <i class=material-icons> chevron_left </i> WeChat(184) </div> <div id=mid>Аида·Ванг</div > <div id=right> <i class=material-icons> more_horiz </i> </div> </header> <div id=contentWrap> <ul id=chatList> <li class=item_me> <div class=chatContent>Я тот человек, которого вы любите больше всего? <span class=bot></span> <span class=top></span> </div> <div class=avatar > <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Беги, брат! (Катающийся теленок) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Я не буду много говорить здесь Хорошо, вот куча кода... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1. png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Брат Дабин, почему ты такой хороший? Когда вижу тебя, я чувствую себя океаном<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Old девочка, сынок, ты в меня влюбился... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Нет, я меня укачивает, меня тошнит, когда я вижу тебя... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <нижний колонтитул id=footer> <div id=keyboard> <i class=material-icons> клавиатура </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Нажмите, чтобы говорить</span> < /div> <div id=icon><i class=material-icons> sense_satisfied </i></div> <div id=add><i class=material-icons> add_circle_outline </i></div> </footer> </div></body></html>
CSS-часть,
* { поля: 0; отступ: 0;}ul li{ list-style: none;}html,body{ высота: 100%; ширина: 100%; переполнение: скрыто;}body{background: #ebebeb;}@font -face {семейство шрифтов: 'Иконки материалов'; стиль шрифта: нормальный; вес шрифта: 400; url(../css/iconfont/MaterialIcons-Regular.eot) /* Для IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(../css/); iconfont/MaterialIcons-Regular.woff) формат('woff2'), url(../css/iconfont/MaterialIcons-Regular.woff2) format('woff'), url(../css/iconfont/MaterialIcons-Regular.ttf) format('truetype' } .material-icons {); семейство шрифтов: «Значки материалов»; вес шрифта: нормальный; размер шрифта: нормальный; 32px; /* Предпочтительный размер значка */ display: inline-block; /* line-height: 0.01rem; */ text-transform: none; направление: ltr; /* Поддержка всех браузеров WebKit */ -webkit-font-smoothing: antialiased; /* Поддержка Safari и Chrome */ рендеринг текста: оптимизироватьLegibility;/* Поддержка Firefox */-moz-osx-font-smoothing: Grayscale/* Поддержка IE */font-feature-settings: 'liga'; : столбец; justify-content: пространство между; высота: 100%;}#header {высота: 46 пикселей; высота строки: 46 пикселей; #363539; display: flex; align-items: center; justify-content: space-between;}#header #left { display: flex; align-items: center; font-size: 14px; 100 пикселей;}#header #right{ display: flex; align-items: center width: 100px; justify-content: flex-end;}#header #right i{ padding-right: 6px;}#header #mid{ text-align: center; flex: 1;}#contentWrap { flex: 1; overflow-y: auto;}.item_me,.item_audio {display: flex-items; : flex-start; justify-content: flex-end; дополнение: 8px;}.item_you { display: flex; align-items: flex-start; justify-content:flex-start; дополнение: 8 пикселей;}.avatar{ширина: 40 пикселей; высота: 40 пикселей;}.avatar img{ширина: 100%;}.item_me .chatContent{заполнение: 10 пикселей; граница: #a0e75a; : 1 пиксель, сплошной #6fb44d; край-право: 15 пикселей; 5 пикселей; позиция: относительная;}.chatContent span {ширина: 0; размер шрифта: 0; позиция: абсолютная;}.item_me .chatContent span.bot { border-width: 8 пикселей; стиль: сплошной пунктирный; border-color: прозрачный прозрачный #6fb44d справа: -17 пикселей сверху: 10 пикселей;}.item_me; .chatContent span.top{ border-width:8px; border-style:solid пунктирный; border-color:прозрачный прозрачный #a0e75a ; right:-15px; top:10px;} .item_you .chatContent{ отступ: 10px; #a0e75a; граница: сплошная 1 пиксель #6fb44d поле слева: 15 пикселей; border-radius: 5 пикселей; позиция: относительная;} .item_you .chatContent span.bot { border-width: 8px; верх: 10 пикселей;}.item_you .chatContent span.top {ширина границы: 8 пикселей стиль границы: твердый; пунктирный цвет: прозрачный #a0e75a прозрачный прозрачный ; left:-15px; top: 10px;} #footer{ height: 46px; : flex; выравнивание элементов: центр; цвет: #7f8389; space-around;}#sayBtn{flex: 1; display: flex; Margin: 0 5px; шрифт-вес: жирный;}.sendBtn{ display: flex: 1; #f4f5f6; граница: 1 пиксель сплошной #bec2c1; граница-радиус: 5 пикселей; центр;}.activeBtn{ display: блок; flex: 1; дополнение: 8 пикселей; фон: #c6c7ca; граница: 1 пиксель #bec2c1; граница-радиус: 5 пикселей; выравнивание текста: центр;}.item_audio .chatContent { дополнение: 6 пикселей; фон: #fff; граница: 1 пиксель, сплошной #999; радиус границы: 5 пикселей; поле-право: 15 пикселей; позиция: относительная; ширина: 120 пикселей; минимальная высота: 20 пикселей;}.item_audio .chatContent span.bot { border-width: 8px; border-style: сплошной пунктирный цвет границы: прозрачный прозрачный прозрачный; #999; справа: -17 пикселей; сверху: 10 пикселей;}.item_audio .chatContent span.top{ border-width: 8px; border-style: сплошной пунктирный; border-color: прозрачный прозрачный #fff; вправо: -15px; ; размер шрифта: 22 пикселя;}.redDot{ фон: #f45454; ширина границы: 50%; 8 пикселей; высота: 8 пикселей; поле справа: 10 пикселей;} Здесь хотелось бы отметить два момента внимания:1.html-часть:
Чтобы избежать проблем, я не обрезал изображение на уровне пикселей. Чтобы избежать проблем, я напрямую использовал значки SVG. Я использовал конкретную библиотеку.
https://material.io/tools/icons/?style=outline
2.css-часть: используйте гибкий макет. Я просто хочу объяснить функцию Html5, поэтому flex не записывает метод записи совместимости. Кроме того, обратите внимание на метод записи части заголовка приложения, который очень часто используется.
Давайте поговорим о ключевой части js.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>WeChat Voice</title> <link rel=stylesheet href=css/record.css> <script> document.addEventListener('DOMContentLoaded', function () { var oSendBtn = document.getElementById('sendBtn'); var soundClips = document.querySelector('.sound-clips'); var mediaRecorder; var oChatList = document.getElementById(' список чата'); navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia( // ограничения — для этого приложения необходим только звук { audio: true }) // Успешный обратный вызов .then(function (stream) { Rec(stream); }) // Обратный вызов при ошибке .catch(function (err) { } } else { } function Rec(stream) { mediaRecorder = new MediaRecorder(stream); oSendBtn.addEventListener('touchstart); ', function (ev) { ev.preventDefault(); this.innerHTML = 'Отпустить до конца'; this.classList.add('activeBtn'); mediaRecorder.start(); false); oSendBtn.addEventListener('touchend', function (ev) { ev.preventDefault(); this.innerHTML = 'Нажмите, чтобы говорить' ; this.classList.remove('activeBtn'); mediaRecorder.stop() }, false); = функция (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('audio'); clipContainer.classList.add('item_audio'); ` <div class = redDot></div> <div class=chatContent> <i class=material-icons Material-icons_wifi>wifi</i> <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div>`; audio.setAttribute('controls' , ''); oChatList.appendChild(clipContainer); var audioURL = window.URL.createObjectURL(e.data); audio.src = audioURL; oChatList.addEventListener('touchstart', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') return; audio.play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode .children[0]) }, false } } }, false); </script></head><body> <div); id=wrap> <header id=header> <div id=left> <i class=material-icons> chevron_left </i> WeChat(184) </div> <div id=mid>Аида·Ванг</div > <div id=right> <i class=material-icons> more_horiz </i> </div> </header> <div id=contentWrap> <ul id=chatList> <li class=item_me> <div class=chatContent>Я тот человек, которого вы любите больше всего? <span class=bot></span> <span class=top></span> </div> <div class=avatar > <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Беги, брат! (Катающийся теленок) <span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Я не буду много говорить здесь Хорошо, вот куча кода... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1. png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Брат Дабин, почему ты такой хороший? Когда вижу тебя, я чувствую себя океаном<span class=bot></span> <span class=top></span> </div> </li> <li class=item_me> <div class=chatContent>Old девочка, сынок, ты в меня влюбился... <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </div> </li> <li class=item_you> <div class=avatar> <img src=images/ava2.jpg </div> <div class=chatContent>Нет, я меня укачивает, меня тошнит, когда я вижу тебя... <span class=bot></span> <span class=top></span> </div> </li> </ul> </div> <нижний колонтитул id=footer> <div id=keyboard> <i class=material-icons> клавиатура </i> </div> <div id=sayBtn> <span id=sendBtn class=sendBtn>Нажмите, чтобы говорить</span> < /div> <div id=icon><i class=material-icons> sense_satisfied </i></div> <div id=add><i class=material-icons> add_circle_outline </i></div> </footer> </div></body></html>Здесь есть много моментов, на которые следует обратить внимание при реализации функции видеозаписи. Давайте поговорим о них по отдельности.
Первое,
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia( { audio : правда }) // Успешный обратный вызов .then(function (stream) { Rec(stream); }) // Обратный вызов при ошибке .catch(function (err) { } } else { });Если вы посмотрите на некоторые интерфейсы HTML5 для записи, вы увидите это
Navigator.getUserMedia()
Будьте осторожны. Это старый стандарт, и он отменен.
navigator.mediaDevices.getUserMedia
Голосовой аспект в мультимедиа HTML5 менялся несколько раз, и он очень беспорядочный. Некоторые теги даже не были реализованы в браузере, и они увядали, не успев расцвести. Вам не о чем беспокоиться, и нет необходимости тратить их зря. Вам просто нужно знать, что я говорю. Этого достаточно, потому что вы знаете, что заброшенное прошлое бесполезно. Если у вас есть время, вы можете с таким же успехом сыграть в игру LOL или King of Glory (хотя я этого не делаю). Я не понимаю разницы между ними, но эти две игры должны быть интересными) Ну, я никогда в нее не играл, поэтому не понимаю).
Вам не нужно понимать, что там внутри. Вам не нужно знать, что такое обещания и что такое медиапотоки. Вам нужно знать только одну вещь.
Приведенный выше код эквивалентен включению крана (или нажатию кнопки записи на диктофоне), тогда нам нужно что-то, чтобы поймать воду. Для этого мы можем использовать рисоварку (или ленту в случае диктофона). под краном и наблюдайте, как он входит. ci (что означает стрелять в нашем родном городе), следующий код
mediaRecorder = new MediaRecorder(stream);
Следующий шаг - нажать кнопку и все будет готово. Соответствующий диктофон означает, что после записи нажмите кнопку воспроизведения. Однако для воспроизведения в нашей программе необходимо иметь не только кассету, но и диктофон. . Диктофон — аудиотег. Если ничего не поделаешь, создадим новый. В этом мире нет объектов, которые программисты не осмелились бы создать. Если одного нового объекта недостаточно, есть только два новых. Остальная часть кода не имеет никаких недостатков, кроме того, что она пугает, это просто возмутительно.
mediaRecorder.ondataavailable = function (e) { var clipContainer = document.createElement('li'); var audio = document.createElement('audio'); clipContainer.classList.add('item_audio'); div class = redDot></div> <div class=chatContent> <i class=material-icons Material-icons_wifi>wifi</i> <span class=bot></span> <span class=top></span> </div> <div class=avatar> <img src=images/ava1.png </ div>`; audio.setAttribute('controls', ''); oChatList.appendChild(clipContainer); window.URL.createObjectURL(e.data); audio.src = audioURL; oChatList.addEventListener('touchstart', function (ev) { if (ev.srcElement.parentNode.className!== 'item_audio') return; audio. play(); ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0]) }, ЛОЖЬ); };Фактически, это записывается и транслируется.
Хорошо, это очень просто? Позвольте мне рассказать о нескольких моментах всего проекта:
1. Наличие разумной структуры диаграммы резки является необходимым условием для выполнения функций в дальнейшем. Если структура сделана хорошо, это избавит вас от проблем в дальнейшем. Подумайте о Чжугэ Ляне, который построил структуру HTML5 еще до того, как он был еще новичком. . Есть три раздела.
2. Прочная основа нативного js и ES6 может дать вам разные идеи. Например, здесь я использую делегирование событий и механизм шаблонов ES6. Особенно при делегировании событий было бы сложно найти узлы, если они не используются. Кроме того, можно легко испортить код, если он будет повторяться.
3. Новые знания и технологии на самом деле несложны. На самом деле они очень просты. Если новая технология не предназначена для улучшения функций и решения наших проблем, то зачем разрабатывать новые технологии? Потому что эти большие парни с большими бородами беспокоятся о том, что их начальство скажет им, что их рабочей нагрузки недостаточно, когда им нечего делать? Технологии созданы для того, чтобы решать проблемы и делать нашу жизнь лучше.
4. Этот проект не будет работать под iOS 11 или более ранней версии, поскольку этот метод не поддерживается до версии IOS 11.2, и вам нужны местные разработчики приложений iOS, чтобы обеспечить поддержку, но под Android это нормально. И вполне предсказуемо, что через несколько лет IOS будет поддерживаться изначально, не предоставляя вам никакой поддержки, поэтому эффективность вашей разработки будет намного выше. Не думайте, что эти технологии далеко. HTML5 станет коммерчески доступным только через 15 лет (сколько лет понадобится, чтобы vue, React и Angular начали использоваться в больших масштабах?). кто подготовлен.
Во всем проекте еще много деталей и моментов, на которые стоит обратить внимание. Я надеюсь, что вы действительно сможете это напечатать сами, потому что вы понимаете, что моя статья и ваше умение использовать эту технологию — это две разные вещи. Желаю вам всем идти дальше и. дальше по дороге к переднему концу (не забывайте почаще возвращаться, чтобы прочитать См. ^_^).
Подвести итогВышеупомянутое представляет собой введение редактора в использование мультимедиа Html5 для реализации голосовой функции WeChat. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!
Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!