Ако работите върху някаква платформа, която трябва да възпроизведе аудио на потребител, например за да продадете някакъв аудио файл, е доста страхотно да покажете формата на вълната му, така че потребителят да бъде впечатлен от структурата на аудиото и от това, което вашата платформа мога да направя. Можете да създадете просто приложение за аудио плейър в JavaScript, като използвате API за уеб аудио. API ви позволява да извличате честота, форма на вълната и други данни от аудио файла. Извлечените данни могат да се използват за визуализиране чрез генериране на вълни. Когато работите с големи данни, които генерира формата на аудио вълната, изчертаването на вълни по-гладко и по-бързо без никакво забавяне в уеб страницата е важно. Като разработчик предпочитам да поддържам страницата по-бърза, независимо от многото съдържание в страницата. Ако се опитаме да начертаем форма на вълната в страницата, трябва да имаме предвид производителността и да изградим някаква проста библиотека, за да я постигнем. Вместо това използвам диаграма на CanvasJS, за да визуализирам формата на вълната, която може да начертае милиони точки от данни за няколко милисекунди.
Основните техники са изградени в JavaScript с помощта на Web Audio API & CanvasJS. Въпреки това работи добре с Angular, React или други рамки на JavaScript.
Инструкции стъпка по стъпка
За да възпроизведете или визуализирате формата на вълната на аудиото, е необходим аудио файл. Нека добавим поле за въвеждане, което позволява на потребителя да преглежда MP3 файлове от своята машина. За да го опростя, го ограничих, за да позволя на потребителя да преглежда само MP3 файлове. Въпреки това, уеб аудио API поддържа WAV, MP3, AAC, OGG и други формати.
<input type="file" class="file-input" id="mp3-input" accept="audio/mp3">
Прочетете аудио файл
В API за уеб аудио трябва да получим ArrayBuffer от аудио данни и да го предадем на BufferSource, за да извлечем аудиото. Използвайки метода AudioContext.decodeAudioData вземете аудио буфера на звука. Декодираният AudioBuffer се семплира повторно до честотата на дискретизация на AudioContext, след което се предава на обратно извикване или обещание.
let margin = 10,
chunkSize = 500,
height = chart.get("height"),
scaleFactor = (height - margin * 2) / 2;
audioContext = new AudioContext();
let buffer = await file.arrayBuffer(),
audioBuffer = await audioContext.decodeAudioData(buffer),
float32Array = audioBuffer.getChannelData(0);
let array = [], i = 0, length = float32Array.length;
while (i < length) {
array.push(
float32Array.slice(i, i += chunkSize).reduce(function (total, value) {
return Math.max(total, Math.abs(value));
})
);
}
Добавете бутони за възпроизвеждане / пауза и спиране
Нека добавим 2 бутона, един за управление на възпроизвеждане/пауза и друг за спиране. Обикновено иконите / текстът в бутона трябва да показват действието, което потребителят може да направи. Когато аудиото се възпроизвежда, покажете текст/икона „Пауза“ и текст/икона „Възпроизвеждане“, когато аудиото е на пауза. Можете лесно да превключвате между състояния на възпроизвеждане и пауза, за да постигнете това. В API за уеб аудио можете да проверите за състоянието на аудиоконтекста и въз основа на текущото състояние или да възобновите аудиото, или да го спрете.
/* HTML */
<button class="button" id="play-pause-btn" title="Play / Pause"><span class="pp-icon"></span></button>
<button class="button" id="stop-btn" title="Stop"><span class="stop-icon"></span></button>
/* JS */
if(audioContext.state === 'running') {
audioContext.suspend().then(() => {
playPauseBtn.classList.toggle('is-play');
});
}
else if(audioContext.state === 'suspended') {
audioContext.resume().then(() => {
playPauseBtn.classList.toggle('is-play');
});
}
Спирането на звука е доста просто. API за уеб аудио има опция за спиране на източника чрез извикване на stop() метод.
source.stop();
Генерирайте точки от данни от аудио данните
CanvasJS поддържа много „типове диаграми“ като линейни, площни, кръгови, диапазонни, финансови диаграми и т.н. за различни набори от данни и случаи на използване. В този случай зоната на обхват е подходяща - тъй като изглежда като аудио вълни. Единствената задача за нас е да генерираме точки от данни от аудио файла, да го предадем на диаграмата. И CanvasJS рисува вълнова графика за вас като чар.
let dps = []
for (let index in array) {
dps.push({ x: margin + Number(index), y: [50 - array[index] * scaleFactor, 50 + array[index] * scaleFactor]});
}
chart.options.data[0].dataPoints = dps;
chart.render();
Добавете ефект на аудио възпроизвеждане към вълната
Когато аудиото започне да се възпроизвежда, добра опция е да засенчите региона, който вече е възпроизведен във формата на вълната. Добавете лентова линия, за да покажете защрихована област в диаграмата и продължавайте да я актуализирате на всеки няколко милисекунди или 1 секунда. И спрете да го актуализирате, след като аудиото спре да се възпроизвежда.
source.onended = () => {
chart.axisX[0].stripLines[0].set("endValue", chart.axisX[0].get("maximum"));
clearInterval(intervalId);
}
let intervalId = setInterval(() => {
chart.axisX[0].stripLines[0].set("endValue", audioContext.currentTime * (chart.data[0].dataPoints.length / audioBuffer.duration));
}, 250);
Ипи! Вие току-що създадохте персонализиран аудиоплейър с опции за възпроизвеждане, пауза и спиране, заедно с формата на аудио вълната, генерирана с помощта на CanvasJS диапазон-площа диаграма. Можете дори да използвате диаграма с колони, диаграма с диапазон-колона показват вълните по различен начин. Можете дори да персонализирате външния вид и усещането на аудио плейъра, като използвате прости свойства на CSS и да съпоставите същото с формата на вълната, като промените свойствата на диаграмата на CanvasJS.
Тази вълнова форма, генерирана от диаграмата CanvasJS, може да бъде интегрирана с аудио/видео плейър, за да стане привлекателна за потребителя. Библиотеката има повече опции за персонализиране за промяна на външния вид и усещането — това ви дава по-голяма гъвкавост да персонализирате външния вид и усещането на диаграмата, за да съответства на темата на вашия уебсайт/плейър. В този урок съм деактивирал интерактивността на диаграмата, за да покажа само формата на вълната. CanvasJS обаче поддържа „интерактивност“, където показва подсказка и акценти, когато задържите диаграма. Проверете този Codepen за код на живо.
