Воспроизведение звуков в веб-приложении Flutter
Для воспроизведения звука на iOS или Android с помощью Flutter большинство людей будут использовать специальные пакеты из репозитория pub.dev.
К сожалению, они не помечены как поддерживаемые на веб-платформе.
На момент написания этой статьи я не мог легко настроить воспроизведение звука в своем веб-приложении (хотя я пробовал большинство пакетов, связанных со звуком), не используя ту же технику, которую я использовал для воспроизведения видео в нем.
Мы рассмотрим решение, которое позволяет нам воспроизводить аудио за 3 простых шага:
1. Нам нужно отредактировать файл шаблона index.html по умолчанию, который находится в папке web. С этими изменениями мы загружаем Аудиоплеер Howler и пишем функцию JavaScript, которая позаботится о фактическом воспроизведении нашего звука.
Вот как будет выглядеть наш index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Flutter Web Audio Player.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Flutter Web Audio Player">
<link rel="apple-touch-icon" href="/icons/Icon-192.png">
<title>Flutter Web Audio Player</title>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/howler.min.js"></script>
<script type="application/javascript">
var audio;
function playAudio(path) {
audio= new Howl({
src: [path]
});
audio.play();
}
</script>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
2. Затем мы пишем функцию Dart с именем playAudio, которая будет вызывать ранее написанную функцию JS со страницы index.html, используя основной пакет dart:js, и передавать аудио путь или URL-адрес, который мы хотим воспроизвести:
import 'dart:js' as js;
void playAudio(String path) {
if(kIsWeb) {
js.context.callMethod('playAudio', [path]);
} else {
// not on the web so we must use a mobile/desktop library...
}
}
Код просто вызывает метод playAudio из контекста, передавая путь в качестве параметра.
3. Звук будет воспроизводиться мгновенно. Это полезно, когда мы хотим добавить звуки взаимодействия к нашим действующим элементам пользовательского интерфейса.
playAudio('https://freesound.org/data/previews/147/147597_2173181-lq.mp3');
// or
playAudio('/some/path/to/my/awesome.mp3');
Я решил немного поиграть и изменил проект по умолчанию, который мы получаем, когда создаем веб-проект Flutter для этой демонстрации:
Весь проект можно найти в этом репозитории GitHub, и вы можете похлопать здесь.
Есть и другие действия, которые мы можем выполнять с помощью Howler API. Он обещает и обеспечивает:
- упрощенный API
- аудио спрайты
- пространственный звук
- полная поддержка кодеков (все файлы для браузера: MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC)
- работает везде (включая IE9)
- предлагает полный контроль
- автоматическое кеширование
- это модульный
- не имеет никаких зависимостей (howler.js весит всего 7 КБ в сжатом виде и не имеет внешних зависимостей или плагинов)
Я говорю, что он ставит много флажков, и более подробную информацию можно найти на его специальной странице.
В заключение отметим, что таким образом можно использовать любой аудиоплеер HTML / JS. Я выбрал Howler, потому что мне понравились его простота, мощность и легкость (для вышеуказанных базовых функций вы можете использовать только базовую библиотеку).
Недавно я наткнулся на порт Dart библиотеки Howler:
Если вас интересует также воспроизведение видео, вы можете проверить это:
Это все!
