В этой статье вы прочитаете про JavaScript библиотеку Howler.js, для работы со звуком. Хотя я бы даже сказал, что это скорее быстрый старт, так как вы научитесь самим основам.
Также если вас интересуют различные JS библиотеки, то возможно вам будет интересна статья «Быстры старт Paper.js библиотеки для работы с Canvas», заходите и читайте, будет интересно.
Как подключить Howler.js:
Для подключения можно использовать NPM, Yarn, CDN, или скачать из GitHub я покажу все три способа.
NPM:
1 | npm install howler |
Yarn:
1 | yarn add howler |
CDN:
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js" integrity="sha512-6+YN/9o9BWrk6wSfGxQGpt3EUK6XeHi6yeHV+TYD2GR0Sj/cggRpXr1BrAQf0as6XslxomMUxXp2vIl+fv0QRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
Как скачивать из GitHub не вижу смысла показывать, а саму ссылку на него вы найдёте ниже.
Теперь вы можете работать с этой библиотекой.
Работа с Howler.js:
Тут стоит сказать, что статья по сути не большой перевод начала документации, с не большими примерами, но этого будет достаточно чтобы работать с библиотекой, ссылку на документацию найдёте ниже.
Быстрый старт:
Перейдём не посредственно к подключению библиотеки к самому файлу HTML, вот не большой код в файле гипертекстовой разметки:
1 2 3 4 5 6 | <script src="/path/to/howler.js"></script> <script> var sound = new Howl({ src: ['sound.webm', 'sound.mp3'] }); </script> |
То есть в начале мы подключаем наш файл, тут показана если бы мы скачивали из GitHub наш файл, и потом создаём объект класса Howl, куда в качестве массива предаём путь до наших ауди фалов.
Но если вы используете синтаксис ES6, то вам тогда скорее подойдёт такой способ подключения:
1 | import {Howl, Howler} from 'howler'; |
Или если не используете ES6:
1 | const {Howl, Howler} = require('howler'); |
Включенные файлы дистрибутива:
- Howler — это исходный код по умолчанию, который включает в себя
howler.coreиhowler.spatial. Он включает в себя все функции, с которыми поставляется Howler; - howler.core — включает только основные функции, направленные на создание паритета между веб-аудио и HTML5-аудио. Он не включает в себя какие-либо функции пространственного/стереозвука.
- howler.spatial — это плагин, добавляющий функциональность пространственного/стереозвука. Для работы требуется howler.core, так как это просто дополнение к ядру.
Примеры:
Дальше будет несколько примеров, можете скопировать их себе и чтобы лучше понять как работать с библиотекой.
Самое простое, воспроизвести MP3:
1 2 3 4 5 | var sound = new Howl({ src: ['sound.mp3'] }); sound.play(); |
Потоковое аудио (для живого аудио или больших файлов):
1 2 3 4 5 6 | var sound = new Howl({ src: ['stream.mp3'], html5: true }); sound.play(); |
Дополнительные параметры воспроизведения:
1 2 3 4 5 6 7 8 9 | var sound = new Howl({ src: ['sound.webm', 'sound.mp3', 'sound.wav'], autoplay: true, loop: true, volume: 0.5, onend: function() { console.log('Finished!'); } }); |
Определите и воспроизведите звуковой спрайт:
1 2 3 4 5 6 7 8 9 10 11 | var sound = new Howl({ src: ['sounds.webm', 'sounds.mp3'], sprite: { blast: [0, 3000], laser: [4000, 1000], winner: [6000, 5000] } }); // Shoot the laser! sound.play('laser'); |
Слушайте события:
1 2 3 4 5 6 7 8 9 10 11 | var sound = new Howl({ src: ['sound.webm', 'sound.mp3'] }); sound.once('load', function(){ sound.play(); }); sound.on('end', function(){ console.log('Finished!'); }); |
Управление несколькими звуками:
1 2 3 4 5 6 7 8 9 | var sound = new Howl({ src: ['sound.webm', 'sound.mp3'] }); var id1 = sound.play(); var id2 = sound.play(); sound.fade(1, 0, 1000, id1); sound.rate(1.5, id2); |
ES6:
1 2 3 4 5 6 7 8 9 | import {Howl, Howler} from 'howler'; const sound = new Howl({ src: ['sound.webm', 'sound.mp3'] }); sound.play(); Howler.volume(0.5); |
Из этих всех примеров можно понять как работать с JavaScript библиотекой Howler.js, как минимум с её базой.
Вывод:
В этой статье вы прочитали про JavaScript библиотеку Howler.js, которая нужна для работы с аудио, надеюсь вам было интересно и полезно. Если вас заинтересовала она, то переходите на GitHub проекта, там и документация и скачать вы её сможете.
Подписываетесь на соц-сети:
Оценка:
Загрузка...