«Звуковая волна — это модель возмущения, вызванного движением энергии, проходящей через такую среду, как воздух». Шучу, мы не такие технические! Если вы работаете на какой-то платформе, которая должна воспроизводить аудио для пользователя, например, для продажи какого-либо аудио-файла, довольно здорово показать его волновую форму, чтобы пользователь был впечатлен структурой аудио и вашей платформой. сможет сделать. Хотите сделать это в браузере? Тогда Wavesurfer.js — правильный инструмент для вас.
С помощью wavesurfer.js вы можете создавать что угодно, от аудиоплеера HTML5 до сложного приложения DJ, но в этом случае мы покажем вам только то, как создать базовый просмотрщик форм волны и простой аудиоплеер с 3 отдельными кнопками, а именно воспроизведение, пауза и остановись
1. Загрузите и включите Wavesurfer.js
Wavesurfer.js — это настраиваемая визуализация формы звукового сигнала, построенная на основе Web Audio API и HTML5 Canvas. В зависимости от того, как вы работаете, вы можете загрузить эту библиотеку двумя способами. Первый — это просто включить скрипт в ваш документ из CDN или локальная копия:
Если вы хотите использовать пакетный модуль, такой как browserify, webpack и т. Д., Вам нужно будет использовать версию, которая поддерживает этот подход. Вам нужно будет установить модуль в вашем проекте, используя следующую команду:
npm install wavesurfer.js@2.0.0-beta01Тогда вы сможете потребовать модуль с помощью require("wavesurfer.js");, Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный сайт или же официальный репозиторий на Github здесь.
2. Использование библиотеки
Waversurfer действительно прост в использовании. С введением версии 2.0 теперь вы можете использовать его с упаковщиками, а не только непосредственно в окне:
С VanillaJS в браузере
Интересующий вас метод — метод создания. Единственный обязательный параметр container, Это может быть либо уникальный селектор CSS3, либо элемент DOM. Тем не менее, вы также можете передать любое количество опции. После создания экземпляра вы можете загрузить аудиофайл, чтобы создать его форму волны, используя метод load. Ожидается, что аудио-URL будет из вашего собственного домена или URL-адреса из песни в другом домене, который поддерживает заголовки CORS:
// Create an instance of wave surfer with its configuration
var Spectrum = WaveSurfer.create({
container: '#audio-spectrum',
// Add some color to the audio spectrum
progressColor: "#03a9f4"
});
Spectrum.on("ready", function(){
// Do something when the file has been loaded
// Do whatever you need to do with the player
Spectrum.play();
Spectrum.pause();
Spectrum.stop();
});
// Load the audio file from your own domain !
Spectrum.load('audio-file.mp3');
Плагин выставляет глобальную переменную WaveSurfer в браузере, так что вы можете просто использовать его после загрузки скрипта.
Использование модуля модуля
Wavesurfer также прост в использовании с webpack, browserify и т. Д. Просто требуется модуль вместо использования глобальной переменной:
// Require the wavesurfer module
var WaveSurfer = require("wavesurfer.js");
// Create an instance of wave surfer with its configuration
var Spectrum = WaveSurfer.create({
container: '#audio-spectrum',
// Add some color to the audio spectrum
progressColor: "#03a9f4"
});
Spectrum.on("ready", function(){
// Do something when the file has been loaded
// Do whatever you need to do with the player
Spectrum.play();
Spectrum.pause();
Spectrum.stop();
});
// Load the audio file from your own domain !
Spectrum.load('audio-file.mp3');
Последний пример
Следующий документ готов к тестированию, и вам нужно только предоставить действительный аудиофайл. В этом случае у нас есть простой чувствительный звуковой спектр, который будет отображаться в браузере, и 3 элемента управления, а именно воспроизведение, пауза и остановка. Основной файл Wavesurfer включен через CDN:
AudioSpectrum in JavaScript
// Store the 3 buttons in some object
var buttons = {
play: document.getElementById("btn-play"),
pause: document.getElementById("btn-pause"),
stop: document.getElementById("btn-stop")
};
// Create an instance of wave surfer with its configuration
var Spectrum = WaveSurfer.create({
container: '#audio-spectrum',
progressColor: "#03a9f4"
});
// Handle Play button
buttons.play.addEventListener("click", function(){
Spectrum.play();
// Enable/Disable respectively buttons
buttons.stop.disabled = false;
buttons.pause.disabled = false;
buttons.play.disabled = true;
}, false);
// Handle Pause button
buttons.pause.addEventListener("click", function(){
Spectrum.pause();
// Enable/Disable respectively buttons
buttons.pause.disabled = true;
buttons.play.disabled = false;
}, false);
// Handle Stop button
buttons.stop.addEventListener("click", function(){
Spectrum.stop();
// Enable/Disable respectively buttons
buttons.pause.disabled = true;
buttons.play.disabled = false;
buttons.stop.disabled = true;
}, false);
// Add a listener to enable the play button once it's ready
Spectrum.on('ready', function () {
buttons.play.disabled = false;
});
// If you want a responsive mode (so when the user resizes the window)
// the spectrum will be still playable
window.addEventListener("resize", function(){
// Get the current progress according to the cursor position
var currentProgress = Spectrum.getCurrentTime() / Spectrum.getDuration();
// Reset graph
Spectrum.empty();
Spectrum.drawBuffer();
// Set original position
Spectrum.seekTo(currentProgress);
// Enable/Disable respectively buttons
buttons.pause.disabled = true;
buttons.play.disabled = false;
buttons.stop.disabled = false;
}, false);
// Load the audio file from your domain !
Spectrum.load('audio-file.mp3');
