Воспроизводить звук мы научились, теперь попробуем его записать. Для этого можно использовать MediaRecorder. Этот же класс используется и для записи видео, но об этом поговорим в следующих уроках. Пока нас интересует звук.
Чтобы MediaRecorder записал для вас звук, он должен знать:
— источник звука
— формат записи
— аудио-кодек
— имя файла
Если вкратце, то кодек – это способ сжатия данных. А под форматом, я так понимаю, здесь подразумевается контейнер, т.е. способ хранения. Я не буду углубляться в эти вопросы, т.к. не являюсь специалистом. В инете сейчас очень много статей на эту тему.
В хелпе есть пример, в котором используется кодек AMR-NB и формат 3GPP. Их я и буду использовать в своем примере.
Напишем простое приложение, которое будет записывать звук с микрофона и даст возможность прослушать то, что записали.
Project name: P1291_MediaRecorderAudio
Build Target: Android 2.3.3
Application name: MediaRecorderAudio
Как сделать запись звука с компьютера? Программа для записи звука Filmora. Как сделать озвучку видео
Package name: ru.startandroid.develop.p1291mediarecorderaudio
Create Activity: MainActivity
Добавим строки в strings.xml:
Record Play Start Stop
Рисуем экран main.xml:
Две верхние кнопки стартуют и останавливают запись, две нижние – воспроизведение записанного.
MainActivity.java:
В onCreate задаем имя файла, куда будет записываться звук.
Так же, как и для MediaPlayer, в хелпе есть подробная схема состояний и действий для MediaRecorder. Советую ознакомиться.
В recordStart мы избавляемся от старого рекордера. Затем удаляем файл для записи, если он уже существует. Далее создаем и настраиваем рекордер используя ряд методов.
setAudioSource. Указываем источник звука – микрофон (MIC). Кроме микрофона есть еще несколько источников:
VOICE_CALL — звук при голосовом разговоре по телефону
VOICE_DOWNLINK — только входящая часть VOICE_CALL
VOICE_UPLINK — только исходящая часть VOICE_CALL
CAMCORDER — микрофон, связанный с веб-камерой
VOICE_RECOGNITION — с микрофона будет записываться исходный аудио поток без преобразований, чтобы получить максимальное качество. Используется для распознавания речи
VOICE_COMMUNICATION – аудио поток с микрофона будет «заточен» под VoIP
Если три последних варианта не поддерживаются текущим устройством, то будет использован микрофон по умолчанию.
setOutputFormat. Указываем формат – 3GPP (THREE_GPP). Остальные форматы можно посмотреть здесь.
setAudioEncoder. Указываем кодек для сжатия аудио — AMR_NB. Остальные кодеки можно посмотреть здесь.
setOutputFile. Указываем имя файла, в который будет вести запись.
После всех настроек вызываем метод prepare, который подготовит рекордер к записи и стартуем запись методом start.
В recordStop останавливаем запись методом stop. После этого метода необходимо заново настроить рекордер, если вы снова хотите его использовать. Просто снова вызвать start не получится. На схеме это показано. Кстати, метод reset также сбрасывает все настройки рекордера и после него необходимо заново указывать источник. формат, кодек, файл.
Как записать звук с компьютера в Windows 10 за пару минут.
Но объект новый создавать необязательно.
В playStart и playStop стартуем и останавливаем воспроизведение записанного файла. Тут ничего нового для нас, все это обсуждалось в Уроке 126.
В методе releaseRecorder мы освобождаем все ресурсы рекордера методом release. После этого объект уже нельзя использовать и необходимо создавать и настраивать новый.
В манифесте необходимо прописать права на запись звука и работу с SD:
После запуска приложения вы сможете записать звук с микрофона и прослушать его.
Распишу еще несколько интересных методов.
setAudioChannels – можно задать режим записи 1 (моно) или 2 (стерео)
setAudioEncodingBitRate и setAudioSamplingRate задают соответственно битрейт и сэмплрейт. Если опять же вкратце, то битрейт – это насколько качественно пишется звук, сэмплрейт – как часто считываются данные с микрофона. Подробности можно узнать у гугла.
setMaxDuration позволяет указать максимальную длительность записи. По достижении этого времени (в мсек), запись остановится, а слушатель, указанный в MediaRecorder.OnInfoListener, получит код what = MEDIA_RECORDER_INFO_MAX_DURATION_REACHED.
setMaxFileSize позволяет указать максимальный размер файла. По достижении указанного размера (в байтах), запись остановится, а слушатель, указанный в MediaRecorder.OnInfoListener, получит код what = MEDIA_RECORDER_INFO_MAX_FILESIZE_REACHED.
Разумеется, эти методы надо вызывать перед вызовом prepare
На следующем уроке:
— пишем звук с помощью AudioRecorder
Присоединяйтесь к нам в Telegram:
— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.
— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Compose, Kotlin, RxJava, Dagger, Тестирование, Performance
— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня
Источник: startandroid.ru
JavaScript: разрабатываем приложение для записи звука
В этом небольшом «туториале» я хочу показать вам, как разработать приложение для записи и воспроизведения аудио-файлов.
Функционал нашего приложения будет следующим:
- запись аудио
- отображение записи с возможностью ее предварительного прослушивания и последующего сохранения или удаления
- хранение аудио-файлов на сервере
- извлечение аудио-файлов, хранящихся на сервере, и их отображение в браузере
Основная технология, которую мы будем использовать, это MediaDevices . Данная технология входит в состав глобального объекта Navigator . Основным методом, предоставляемым указанным интерфейсом является getUserMedia() . Запись данных (в простых случаях вроде нашего) выполняется с помощью интерфейса MediaRecorder .
Для небольшой стилизации нашего приложения мы будем использовать Sass.
Выглядеть приложение примерно так:
Основным источником вдохновения для меня послужила эта замечательная статья.
Обратите внимание: данная статья рассчитана, преимущественно, на начинающих разработчиков, хотя, смею надеяться, что и опытные найдут в ней что-нибудь интересное.
Вы готовы? Тогда вперед!
Начнем с разработки сервера.
Сервер
Создаем директорию для проекта, переходим в нее, инициализируем проект и устанавливаем необходимые зависимости:
# создаем директорию mkdir record-app # переходим в нее cd !$ # инициализируем проект # `-y` означает выбор значений по умолчанию yarn init -y # или npm init -y # устанавливаем основные зависимости yarn add express multer # или npm i . # устанавливаем зависимости для разработки yarn add concurrently nodemon open-cli sass
- express — фреймворк для Node.js , облегчающий разработку REST API
- multer — обертка над busboy для разбора данных в формате multipart/form-data , часто используемая для сохранения файлов
- concurrently — утилита для одновременного выполнения команд, определенных в package.json
- nodemon — утилита для запуска сервера для разработки (сервера, который автоматически перезапускается при изменении наблюдаемых файлов)
- open-cli — утилита для автоматического открытия вкладки браузера по указанному адресу
- sass — утилита для преобразования SASS в CSS
Определяем команды для запуска сервера для разработки в package.json :
«scripts»: < «sass»: «sass —no-source-map —watch public/style.scss:public/style.css», «server»: «open-cli http://localhost:3000 nodemon index.js», «start»: «concurrently «yarn sass» «yarn server»» >
- команда sass запускает утилиту для преобразования файла public/style.scss в файл public/style.css в режиме реального времени ( —watch ) и без создания карты источников ( —no-source-map )
- команда server запускает сервер для разработки и открывает вкладку браузера по адресу http://localhost:3000
- команда start выполняет команды sass и server
В коде сервера мы будем использовать ES6-модули ( import/export ), поэтому определим в package.json тип основного файла сервера как модуль:
«type»: «module»
В качестве альтернативы для кода сервера можно использовать файл с расширением .mjs .
Давайте определимся со структурой проекта:
— record-app — node_modules — public — директория со статическими файлами (клиент) — img — microphone.png — pause.png — play.png — stop.png — index.html — script.js — style.scss — uploads — директория для аудио-файлов — index.js — сервер — package.json
Изображения, которые мы будем использовать при разработке приложения, можно скачать здесь.
Приступаем к реализации.
Что должен уметь наш сервер? Многого от него не требуется: все, что он должен уметь — это обслуживать статические файлы из директорий public и uploads , а также сохранять и извлекать аудио-файлы.
Импортируем необходимые модули:
import express from ‘express’ import < dirname >from ‘path’ import < fileURLToPath >from ‘url’ import < promises as fs >from ‘fs’ import multer from ‘multer’
Определяем абсолютный путь к текущей (рабочей) директории:
const __dirname = dirname(fileURLToPath(import.meta.url))
const upload = multer(< storage: multer.diskStorage(< // директория для файлов destination(req, file, cb) < cb(null, ‘uploads/’) >, // названия файлов filename(req, file, cb) < cb(null, `$.mp3`) > >) >)
Создаем приложение express и определяем директории со статическими файлами:
const app = express() app.use(express.static(‘public’)) app.use(express.static(‘uploads’))
Определяем маршрут для сохранения аудио с помощью multer , используемого в качестве посредника (middleware). Аудио будет отправляться методом POST в формате multipart/form-data по адресу /save :
// поле, содержащее файл, должно называться `audio` app.post(‘/save’, upload.single(‘audio’), (req, res) => < // в ответ мы возвращаем статус `201`, // свидетельствующий об успешном сохранении файла на сервере res.sendStatus(201) >)
Определяем «роут» для извлечения сохраненных аудио и их отправки клиенту (метод — GET , адрес — /records ):
app.get(‘/records’, async (req, res) => < try < // читаем содержимое директории `uploads` let files = await fs.readdir(`$/uploads`) // нас интересуют только файлы с расширением `.mp3` files = files.filter((fileName) => fileName.split(‘.’)[1] === ‘mp3’) // отправляем файлы клиенту res.status(200).json(files) > catch (e) < console.log(e) >>)
Наконец, определяем порт (по умолчанию 3000 ) и запускаем сервер:
const port = process.env.PORT || 3000 app.listen(port, () => < console.log(») >)
На этом с сервером мы закончили. Переходим к клиенту.
Клиент
Весь код клиента будет находиться в директории public .
Начнем с разметки ( index.html ).
Record App
Record App
My Records
My Record
Save Remove ©
Обратите внимание на идентификаторы. Поскольку DOM-элементы с идентификаторами становятся свойствами глобального объекта window , мы сможем получать к ним доступ напрямую, т.е. без предварительного получения ссылки на элемент путем вызова таких методов как querySelector() .
Сделаем приложение красивым ( style.scss ):
Наконец, переходим к тому, ради чего мы, собственно, здесь собрались. Я, конечно же, имею ввиду клиентский скрипт. Но сначала кратко поговорим об интерфейсе MediaDevices и его методе getUserMedia() .
Интерфейс MediaDevices предоставляет доступ к медиа-устройствам пользователя, таким как камера, микрофон, а также к совместному использованию экрана. Разумеется, пользователь должен явно предоставить разрешение на такой доступ. Спецификация Media Capture and Streams определяет довольно жесткие правила на этот счет.
Метод getUserMedia() запрашивает разрешение пользователя на использование медиа устройства (камера, микрофон). Результат возвращает промис, содержащий поток (объект MediaStream ), который состоит из треков (дорожек), содержащих требуемые данные. Данный метод принимает ограничения (объект MediaStreamConstraints ), определяющий, какие типы медиа запрашиваются, а также требования для каждого типа.
В общем виде это выглядит так:
// мы будем запрашивать разрешение на доступ только к аудио const constraints = < audio: true, video: true >let stream = null navigator.mediaDevices.getUserMedia(constraints) .then((_stream) => < stream = _stream >) // если возникла ошибка, значит, либо пользователь отказал в доступе, // либо запрашиваемое медиа-устройство не обнаружено .catch((err) => < console.error(`Not allowed or not found: $`) >)
MediaRecorder — это интерфейс MediaStream Recording API представляющий функциональность для простой записи медиа. Нас интересуют такие методы указанного интерфейса, как start() и stop() , свойство state , определяющее состояние записи, а также событие dataavailable , возникающее по окончанию записи.
Определяем глобальные переменные и забавы ради добавляем в подвал текущий год:
let chunks = [] let mediaRecorder = null let audioBlob = null document.querySelector(‘footer’).textContent += new Date().getFullYear()
Определяем утилиты для создания DOM-элементов и смены CSS-классов:
// функция принимает объект с тегом создаваемого элемента, // дочерними элементами в виде массива и атрибутами const createEl = (< tag = ‘div’, children, . attrs >) => < // создаем элемент const el = document.createElement(tag) // если имеются атрибуты if (Object.keys(attrs).length >0) < // добавляем их к элементу Object.entries(attrs).forEach(([attr, val]) =>< el[attr] = val >) > // если имеются дочерние элементы if (children) < // прибегаем к рекурсии children.forEach((_el) =>< el.append(createEl(_el)) >) > // возвращаем элемент return el > // функция принимает элемент, новый и старый CSS-классы const toggleClass = (el, oldC, newC) =>
Определяем функцию для начала записи:
async function startRecord() < // проверяем поддержку if (!navigator.mediaDevices !navigator.mediaDevices.getUserMedia) < return console.warn(‘Not supported’) >// меняем изображение на основе состояния `mediaRecorder` record_img.src = `img/$< mediaRecorder mediaRecorder.state === ‘recording’ ? ‘microphone’ : ‘stop’ >.png` // если запись не запущена if (!mediaRecorder) < try < // получаем поток аудио-данных const stream = await navigator.mediaDevices.getUserMedia(< audio: true >) // создаем экземпляр `MediaRecorder`, передавая ему поток в качестве аргумента mediaRecorder = new MediaRecorder(stream) // запускаем запись mediaRecorder.start() // по окончанию записи и наличии данных добавляем эти данные в соответствующий массив mediaRecorder.ondataavailable = (e) => < chunks.push(e.data) >// обработчик окончания записи (см. ниже) mediaRecorder.onstop = mediaRecorderStop > catch (e) < console.error(e) record_img.src = ‘ img/microphone.png’ >> else < // если запись запущена, останавливаем ее mediaRecorder.stop() >>
Определяем функцию обработки окончания записи:
function mediaRecorderStop() < // если имеется предыдущая (новая) запись if (audio_box.children[0]?.localName === ‘audio’) < // удаляем ее audio_box.children[0].remove() >// создаем объект `Blob` с помощью соответствующего конструктора, // передавая ему `blobParts` в виде массива и настройки с типом создаваемого объекта // о том, что такое `Blob` и для чего он может использоваться // очень хорошо написано здесь: https://learn.javascript.ru/blob audioBlob = new Blob(chunks, < type: ‘audio/mp3’ >) // метод `createObjectURL()` может использоваться для создания временных ссылок на файлы // данный метод «берет» `Blob` и создает уникальный `URL` для него в формате `blob:/` const src = URL.createObjectURL(audioBlob) // создаем элемент `audio` const audioEl = createEl(< tag: ‘audio’, src, controls: true >) audio_box.append(audioEl) // переключаем классы toggleClass(record_box, ‘hide’, ‘show’) // выполняем очистку mediaRecorder = null chunks = [] >
Определяем функцию для отправки новой записи на сервер для сохранения:
async function saveRecord() < // данные должны иметь формат `multipart/form-data` const formData = new FormData() // запрашиваем у пользователя название для записи let audioName = prompt(‘Name?’) // формируем название записи audioName = audioName ? Date.now() + ‘-‘ + audioName : Date.now() // первый аргумент — это название поля, которое должно совпадать // с названием поля в посреднике `upload.single()` formData.append(‘audio’, audioBlob, audioName) try < await fetch(‘/save’, < method: ‘POST’, body: formData >) console.log(‘Saved’) // сброс resetRecord() // получение записей от сервера fetchRecords() > catch (e) < console.error(e) >>
Определяем функции сброса и удаления новой записи:
function resetRecord() < toggleClass(record_box, ‘show’, ‘hide’) audioBlob = null >function removeRecord() < if (confirm(‘Sure?’)) < resetRecord() >>
Для формирования списка записей, полученных от сервера, нам потребуется функция для создания относительно сложного DOM-элемента:
const createRecordEl = (src) => < // получаем дату создания и название файла const [date, audioName] = src.replace(‘.mp3’, »).split(‘-‘) // форматируем дату const audioDate = new Date(+date).toLocaleString() // создаем элемент return createEl(< className: ‘audio_item’, children: [ < tag: ‘audio’, src, // обработчик окончания воспроизведения записи onended: (< currentTarget >) => < // меняем изображение currentTarget.parentElement.querySelector(‘img’).src = ‘img/play.png’ >>, < tag: ‘button’, className: ‘btn’, // обработчик нажатия кнопки для запуска воспроизведения (см. ниже) onclick: playRecord, children: [ < tag: ‘img’, src: ‘img/play.png’ >] >, < tag: ‘p’, textContent: `$$` : »>` > ] >) >
Готовый элемент будет выглядеть примерно так:
26.09.2021, 12:01:38 — test1
Определяем функцию для получения записей от сервера и формирования соответствующего списка:
async function fetchRecords() < try < // получаем файлы const files = await (await fetch(‘/records’)).json() // очищаем контейнер records_box.innerHTML = » // если имеется хотя бы один файл if (files.length >0) < // формируем список files.forEach((file) =>< records_box.append(createRecordEl(file)) >) // если файлов нет > else < // предлагаем пользователю что-нибудь записать records_box.append( createEl(< tag: ‘p’, textContent: ‘No records. Create one’ >) ) > > catch (e) < console.error(e) >>
Определяем функцию для запуска воспроизведения:
function playRecord(< currentTarget: playBtn >) < // находим соответствующий элемент `audio` const audioEl = playBtn.previousElementSibling // если воспроизведение аудио еще не запускалось или было приостановлено if (audioEl.paused) < // запускаем воспроизведение audioEl.play() playBtn.firstElementChild.src = ‘img/pause.png’ >else < // останавливаем воспроизведение audioEl.pause() playBtn.firstElementChild.src = ‘img/play.png’ >>
Наконец, добавляем кнопкам соответствующие обработчики и вызываем функцию для получения записей от сервера:
record_btn.onclick = startRecord save_btn.onclick = saveRecord remove_btn.onclick = removeRecord fetchRecords()
Для того чтобы убедиться в работоспособности нашего приложения, выполняем команду yarn start или npm start . В директории public появляется файл style.css , сгенерированный на основе style.scss , запускается сервер для разработки ( ) и в браузере открывается новая вкладка по адресу http://localhost:3000 .
Нажатие кнопки приводит к запросу пользователя о выдаче разрешения на использование микрофона. Предоставляем программе такое разрешение. После этого начинается запись (об этом, в частности, свидетельствует красный индикатор рядом с кнопкой для закрытия вкладки и значок видеокамеры в адресной строке).
Говорим что-нибудь в микрофон и нажимаем «Стоп». Появляется блок с новой записью и возможностью ее прослушивания, сохранения или удаления.
Нажимаем «Save» и вводим название записи. В директории uploads появляется новый файл в формате .mp3 , в консоли появляется сообщение «Saved» и список записей обновляется.
Согласитесь, что запись аудио (и видео) с помощью технологий, предоставляемых браузером, никогда не была такой простой и доступной.
Пожалуй, это все, чем я хотел поделиться с вами в данной статье.
Благодарю за внимание и хорошего дня!
Источник: habr.com
Разработка android приложения для записи звука
В этом руководстве мы создадим базовое приложение для записи звука. Оно работает аналогично встроенному приложению Android recorder, но имеет очень простой пользовательский интерфейс.
ПРИМЕЧАНИЕ: Этот туториал предназначен для новичков и начинающих разработчиков Android. Я предполагаю, что вы уже знакомы с некоторыми основами программирования Android.
Вы узнаете о классе MediaRecorder, как получить разрешения пользователя (в Android M и выше) и как получить доступ к внешнему хранилищу на android.
Давайте начнем разработку!
Самый распространенный способ записи медиа — это класс MediaRecorder. В нашем файле MainActivity.java мы создадим myAudioRecorder из класса MedianRecorder. Мы предоставим ему источник звука (микрофон) и зададим формат вывода 3Gpp. Для хранения записи будем использовать место на внешнем хранилище.
private MediaRecorder myAudioRecorder; output = Environment.getExternalStorageDirectory().getAbsolutePath() + «/myrecording.3gp»; myAudioRecorder = new MediaRecorder(); myAudioRecorder.setAudioSource(MediaRecorder.AudioSource.MIC); myAudioRecorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP); myAudioRecorder.setAudioEncoder(MediaRecorder.OutputFormat.AMR_NB); myAudioRecorder.setOutputFile(output);
Примечание: С каждой новой записью предыдущая будет удаляться, так как каждая запись записывается в один и тот же файл.
В случае если вы хотите сохранить все файлы, вы можете сохранить их в отдельных файлах. (Воспринимайте это как личное задание!)
Используются три кнопки:
1) START
2) STOP
3) PLAY
start = (Button)findViewById(R.id.button1); stop = (Button) findViewById(R.id.button2); play = (Button)findViewById(R.id.button3); start.setOnClickListener(this); stop.setOnClickListener(this); play.setOnClickListener(this);
Интуитивно понятно, что кнопки работают так, как они названы. Теперь мы присоединим объект myAudioRecorder к событиям onClickListener отдельных кнопок, чтобы начать и сохранить запись. Для кнопок START и STOP:
public void start(View view) < try< myAudioRecorder.prepare(); myAudioRecorder.start(); >catch (IllegalStateException e) < e.printStackTrace(); >catch (IOException e) < e.printStackTrace(); >start.setEnabled(false); stop.setEnabled(true); Toast.makeText(getApplicationContext(), «Recording started», Toast.LENGTH_SHORT).show(); > public void stop(View view)
Toast показывает «Запись началась», когда начинается запись. Аналогично мы видим toast, когда запись сохраняется. Для PLAY мы прочитаем выходной файл и воспроизведем его через объект MediaPlayer. Снова отображается toast для воспроизведения аудио. Нам нужно добавить блоки try-catch в различных местах, чтобы избежать сбоев.
public void play(View view) throws IllegalArgumentException, SecurityException, IllegalStateException, IOException
В UI (пользовательском интерфейсе) мы просто добавим три кнопки, как указано выше. Файл activity_main.xml выглядит следующим образом:
Нам понадобятся разрешения пользователей для доступа к MIC и хранилищу, поэтому мы добавим разрешения в Android_Manifest.xml
ПРИМЕЧАНИЕ: Разрешения изменились в Android M. Теперь разрешения запрашиваются во время выполнения, а не во время установки, как это было в Android M.
Чтобы решить эту проблему, мы добавим проверку в наш код, чтобы определить версию Android mobile, с которой мы работаем, и действовать соответствующим образом.
Добавьте необходимые разрешения в Android.manifest для record_audio и file_storage.
Теперь соберите проект и запустите приложение. Оно должно запросить разрешения, когда вы откроете его в первый раз.
Все должно работать, как ожидалось.
Полный файл MainActivity.java выглядит следующим образом:
Источник: bookflow.ru