Odtwarzacz audio, którego pasek postępu przyjmuje kształt waveformu to coś co często można spotkać w wielu aplikacjach streamingowych. Od dłuższego czasu chciałem stworzyć taki odtwarzacz aby ostatecznie zaimplementować go w moich aplikacjach MSC ale zawsze to przekładałem. Jakie było moje zaskoczenie, kiedy ostatnio taki wymóg pojawił się w jednym z zapytań ofertowych. Niestety (lub na szczęście) moja oferta nie została wybrana ale ja mimo tego postanowiłem w tym wpisie pokazać jak wygenerować graficzny przebieg fali (ang. waveform) na podstawie dowolnego pliku audio w takich formatach jak mp3 / m4a w przeglądarce internetowej. Tak wygląda waveform w serwisie SoundCloud, który śledzi postęp odtwarzanego utworu i pozwala szybko przeskakiwać do dowolnego miejsca na linii czasu:

Przykład waveformu

Zróbmy zatem coś podobnego. Na początek bierzemy plik mp3 z dowolną treścią i w naszym projekcie instalujemy odtwarzacz za pomocą standardowego tagu audio:

<audio src="plik.mp3"> 

Sprawdzamy czy plik poprawnie odtwarza się aby wykluczyć uszkodzenie pliku lub niekompatybilny format audio.

Generowanie waveformu audio w JavaScript

Do w miarę łatwego wygenerowania fali utworu mp3 m4a będziemy potrzebowali biblioteki p5.js Jak możemy przeczytać na stronie projektu: p5.js to biblioteka JavaScript do kreatywnego kodowania, przeznaczona między innymi dla artystów i projektantów. Biblioteka jest darmowa i rzecz jasna open-source. Bibliotekę pobieramy ze strony p5js.org

Krok 1: Instalacja biblioteki p5.js i rozszerzenia p5.sound

<script src="p5.min.js"></script>

Biblioteka p5.js pozwala wykorzystać język Processing w tworzeniu kreatywnych i nowoczesnych stron internetowych. p5.js posiada wiele wtyczek rozszerzających możliwości tej biblioteki, które udostępniają wiele użytecznych i specyficznych funkcji – jedną z nich jest p5.sound. Rozszerzenie p5.sound rozszerza p5.js o funkcjonalność Web Audio, w tym wejście audio, odtwarzanie, analizę dźwięku a nawet jego syntezę. Skrypt ten można pobrać z serwisu GitHub: p5.js-sound

<script src="p5.audio.min.js"></script>

Pisanie aplikacji i animacji za pomocą p5 bardzo przypomina posługiwanie się natywnym elementem canvas. Stwórzmy podstawę HTML pod nasz projekt:

<!DOCTYPE html>
  <html lang="pl-PL">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>WaveForm</title>
      <link href="style.css" rel="stylesheet">
      <script src="p5.js"></script>
      <script src="p5.sound.min.js"></script>
      <script src="sketch.js"></script>
    </head>
    <body>
       <main>
       </main>
    </body>
</html>

Plik, który będziemy tworzyć to sketch.js. Załadujmy sam plik i sprawdźmy czy wszystko działa:

let audio;
 function preload(){
     audio = loadSound('muzyka.mp3');
 }
 function setup() {
   createCanvas(windowWidth, windowHeight);
   console.log(audio);
 }
 function draw() {
   background(0);
   translate(0, height / 2);
 }

W konsoli Chrome powinniśmy zobaczyć zwrócone wartości przez obiekt audio:

Podgląd wartości zwracanych przez funkcję loadSound()

Krok 2: Generowanie przebiegu fali z wartości amplitudy

Głośność danego momentu w pliku dźwiękowym to najbardziej podstawowa informacja jaką można z niego wyciągnąć. Posiadając dane o zmianach tej głośności w jednostce czasu będziemy mogli wygenerować przebieg fali. W p5.js amplituda przyjmuje wartości od 0 do 1 gdzie 0 to totalna cisza a 1 to maksymalna głośność.

W funkcji draw() użyję funkcji getPeaks(). Zwraca tablicę szczytów amplitudy w pliku audio, której można użyć do narysowania statycznego kształtu fali. Skanuje bufor audio pliku dźwiękowego p5, aby znaleźć największe amplitudy. Akceptuje jeden parametr 'length’, który określa rozmiar tablicy. Większe tablice dają bardziej precyzyjne wizualizacje przebiegów.

 const wform = audio.getPeaks(windowWidth);

Teraz wystarczy narysować wizualizację przebiegu fali za pomocą zwykłej pętli for:

for(let i=0; i<wform.length; i++){
   line(i, wform[i](windowHeight/5), i,wform[i]-(windowHeight/5));
}

Stałą windowHeight podzieliłem przez 5 aby wykres wyglądał naturalnie i nie zajmował całej wysokości. Tego typu parametry jak i barwy można oczywiście dostosować do własnych potrzeb.

Efekt końcowy

Wygenerowany przebieg fali (waveform) w JavaScript za pomocą biblioteki p5.js

Tak utworzoną wizualizację można teraz wykorzystać jako progress bar we własnym odtwarzaczu audio lub w inny kreatywny sposób.

Podsumowanie

Mam nadzieję, że ten artykuł zachęci do eksplorowania możliwości biblioteki p5.js, do której z pewnością będziemy jeszcze wracać. Język Processing i biblioteka p5.js to technologie bardzo przyjazne kreatywnym deweloperom, którzy chcą wykorzystać możliwości nowoczesnych przeglądarek internetowych. Praca z zaawansowaną animacją czy multimediami jest o wiele prostsza wykorzystując wyspecjalizowane do takich przypadków, popularne i utrzymywane biblioteki.

Źródła

Oceń artykuł na temat: Generowanie przebiegu fali z pliku audio w JavaScript
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 12