@sad-systems/a-tracktor

The Javascript library contains a set of widgets to visualize audio data on a web page.

Source code

All the source code you can find on the GitHub.

Live demo

Installation

yarn add @sad-systems/a-tracktor

Usage

Example 1

Using existed audio and view element on the page.

HTML:

<body>
    <audio id="audio" src="some-audio-file.mp3"></audio>
    <div id="div-analyzer"></div>
    <button id="btn-play">Play/Pause</button>
</body>

Javascript:

import { FrequencyAnalyzer } from '@sad-systems/a-tracktor';

const audioElement = document.getElementById('audio');
const viewElement = document.getElementById('div-analyzer');
const playBtnElement = document.getElementById('btn-play');

const f = new FrequencyAnalyzer(audioElement, viewElement, { color: '#ffb21d' });

playBtnElement.onclick = () => {
  if (audioElement.paused) {
    f.start();
    audioElement.play();
  } else {
    f.stop();
    audioElement.pause();
  }
}

Example 2

Auto creation the audio and view elements.

HTML:

<body>
    <button id="btn-play">Play/Pause</button>
</body>

Javascript:

import { WaveformAnalyzer } from '@sad-systems/a-tracktor';

const playBtnElement = document.getElementById('btn-play');

const w = new WaveformAnalyzer();
const audioElement = w.getAudioSource().audioElement;
const viewElement = w.getViewElement();

// Customize background
viewElement.style.backgroundColor = '#800';

// Set audio file
audioElement.src = 'some-audio-file.mp3';

playBtnElement.onclick = () => {
  if (audioElement.paused) {
    w.start();
    audioElement.play();
  } else {
    w.stop();
    audioElement.pause();
  }
}

Example 3

Using multiple analyzers for the same audio source.

HTML:

<body>
    <audio id="audio" src="some-audio-file.mp3"></audio>
    <button id="btn-play">Play/Pause</button>
</body>

Javascript:

import { FrequencyAnalyzer, WaveformAnalyzer, AmplitudeAnalyzer } from '@sad-systems/a-tracktor';

const audioElement = document.getElementById('audio');
const playBtnElement = document.getElementById('btn-play');

const f = new FrequencyAnalyzer(audioElement);
const w = new WaveformAnalyzer(audioElement);
const a = new AmplitudeAnalyzer(audioElement);

playBtnElement.onclick = () => {
  if (audioElement.paused) {
      f.start();
      w.start();
      a.start();
      audioElement.play();
  } else {
      f.stop();
      w.stop();
      a.stop();
      audioElement.pause();
  }
}

Example 4

Using multiple analyzers for the same dedicated audio source.

HTML:

<body>
    <audio id="audio" src="some-audio-file.mp3"></audio>
    <button id="btn-play">Play/Pause</button>
</body>

Javascript:

import { FrequencyAnalyzer, WaveformAnalyzer, AmplitudeAnalyzer } from '@sad-systems/a-tracktor';

const playBtnElement = document.getElementById('btn-play');
const audioElement = document.getElementById('audio');
let f1, w1, a1, a2;
let init = false;

playBtnElement.onclick = () => {

    // This section should be used only once
    if (!init) {
        init = true;

        // Create single audio source
        audioElement = document.getElementById('audio');
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const mediaSource = audioContext.createMediaElementSource(audioElement);
        // Create splitter for two channels audio
        const splitter = audioContext.createChannelSplitter(2);

        // Connect the source to speakers to control
        mediaSource.connect(audioContext.destination);
        // Connect audio splitter
        mediaSource.connect(splitter);

        // Create analyzers for the same audio source
        f1 = new FrequencyAnalyzer(mediaSource);
        w1 = new WaveformAnalyzer(mediaSource);
        // Create two separete analysers for channels
        a1 = new AmplitudeAnalyzer(splitter, null, { stereo: false, sourceChannel: 0 });
        a2 = new AmplitudeAnalyzer(splitter, null, { stereo: false, sourceChannel: 1 });

        // Styling the analyzers views
        const a1view = a1.getViewElement();
        const a2view = a2.getViewElement();
        a1view.style.width = '20px';
        a1.resize();
        a2view.style.width = '20px';
        a2.resize();
    }

    // Start/stop the audio and analyzers
    if (audioElement.paused) {
        f1.start();
        w1.start();
        a1.start();
        a2.start();
        audioElement.play();
    } else {
        f1.stop();
        w1.stop();
        a1.stop();
        a2.stop();
        audioElement.pause();
    }
    
}

Example 5

Analyze a microphone.

HTML:

<body>
    <div id="mic-analyzer"></div>
    <button id="btn-mic">Activate a microphone</button>
</body>

Javascript:

import { FrequencyAnalyzer } from '@sad-systems/a-tracktor';

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

const viewElement = document.getElementById('mic-analyzer');
const buttonMic   = document.getElementById('btn-mic');

let audioContext;
let micStream;
const f1 = new FrequencyAnalyzer(null, viewElement);

buttonMic.onclick = () => (!micStream && startMicSession());

/**
 * Starts analyze the microphone
 */
const startMicSession = () => {
    navigator.getUserMedia(
        { audio: true, video: false },
        (stream) => {
            micStream = stream;

            audioContext = audioContext || new (window.AudioContext || window.webkitAudioContext)();
            const mediaSource = audioContext.createMediaStreamSource(stream);

            f1.changeAudioSource(mediaSource);
            f1.start();
        },
        (error) => {
            console.log('Error:', error.message);
        }
    );
}

@sad-systems/a-tracktor - v1.2.0

Source code

Live demo

Installation

Usage

Example 1

Example 2

Example 3

Example 4

Example 5

Credits