OpenSensorHub Toolkit

# Audio

The Audio view allows you to display audio-type data. New APIs are being released such as the WebCodec API and allow more flexible support for audio streaming.

Details of the API can be found here https://github.com/WICG/web-codecs (opens new window)and here https://wicg.github.io/web-codecs/ (opens new window).

If the browser does not support WebCodec API, It will use as fallback the lib ffmpeg.js.

The lib is based on FFMPEG.js which is a port of the native FFMPEG C++ library using emscripten (opens new window). More information: https://github.com/mdhsl/ffmpeg.js (opens new window)

The view is composed of a decoder (either WebCodec API or FFMPEG.js) and one or more audio viewers: equalizer, spectrogram etc.


API Reference

# Supported layers

The view supports type layers:

  • data

# Docoders

The view will use the decoder that is supported by the browser, either the one of the WebCodecApi or the one of the Ffmpeg.js lib. By default, the 'aac' codec is used.

# WebCodecAPI

The webcodecApi uses HW acceleration. The webcodecApi uses HW acceleration and is still experimental. It is necessary to activate the options in chrome as indicated on https://github.com/WICG/web-codecs (opens new window)

# Ffmpeg.js

The decoding is processed frame by frame using the library ffmpeg.js following this principle https://ffmpeg.org/doxygen/3.3/decode__audio_8c_source.html (opens new window).

# Visualizers

The view allows to visualize the audio data in frequency and time.

One or more visualizers can be added to the audio view. The audio view is responsible for decoding the data and then forwarding the decoded AudioBuffer to all visualizers. Each will then display the data independently. The audio view does not have an anchor in the DOM, it is the visualizers that must be added on a div of the application.

To do this, we will use the container parameter of the constructor.

API Reference

There are several audio visualizers provided by default and grouped by type: time, frequency or spectrogram. Each group can have several implementations: chart.js, pure HTML5 canvas, three.js etc.

Here is the list:

Frequency:

  • AudioFrequencyCanvasVisualizer

    API Reference

  • AudioFrequencyChartJsVisualizer

    API Reference

Time:

  • AudioTimeCanvasVisualizer

    API Reference

  • AudioTimeChartJsVisualizer

    API Reference

Spectrogram:

  • AudioSpectrogramVisualizer
    API Reference

# Example

import SosGetResultAudio from "osh-js/core/datasource/SosGetResultAudio";
import AudioView from "osh-js/core/ui/view/audio/AudioView";
import AudioFrequencyCanvasVisualizer
    from "osh-js/core/ui/view/audio/visualizer/frequency/AudioFrequencyCanvasVisualizer";
import AudioTimeCanvasVisualizer from "osh-js/core/ui/view/audio/visualizer/time/AudioTimeCanvasVisualizer";
import AudioFrequencyChartJsVisualizer
    from "osh-js/core/ui/view/audio/visualizer/frequency/AudioFrequencyChartJsVisualizer";
import AudioTimeChartJsVisualizer from "osh-js/core/ui/view/audio/visualizer/time/AudioTimeChartJsVisualizer";
import AudioSpectrogramVisualizer from "osh-js/core/ui/view/audio/visualizer/spectrogram/AudioSpectrogramVisualizer";

let audioDataSource = new SosGetResultAudio("alex-audio", {
  protocol: "ws",
  service: "SOS",
  endpointUrl: "sensiasoft.net:8181/sensorhub/sos",
  offeringID: "urn:android:device:dd90fceba7fd5b47-sos",
  observedProperty: "http://sensorml.com/ont/swe/property/AudioFrame",
  startTime: "2021-04-12T10:48:45Z",
  endTime: "2021-04-12T10:49:45Z",
  replaySpeed: 1.0,
  bufferingTime: 1000
});

let audioView = new AudioView({
 name: "Audio",
 css: 'audio-css',
 container: 'audio-chart-container',
 dataSource: audioDataSource,
 gain: 5,
 playSound: true
});

const audioCanvasFrequencyVisualizer = new AudioFrequencyCanvasVisualizer({
    fftSize: 32,
    barWidth:20,
    css: 'audio-canvas',
    container: 'canvas-frequency'
});
const audioCanvasTimeVisualizer = new AudioTimeCanvasVisualizer({
    fftSize: 1024,
    css: 'audio-canvas',
    container: 'canvas-time'
});

const audioChartFrequencyVisualizer = new AudioFrequencyChartJsVisualizer({
    css: 'audio-canvas',
    fftSize: 32,
    container: 'chart-frequency',
    chartjsProps: {
        datasetsProps: {
            borderColor: 'rgba(0,0,0,0.5)',
            backgroundColor: 'rgba(210,210,210,0.8)',
            barThickness: 20,
            borderWidth: 1
        },
    }
});

const audioChartTimeVisualizer = new AudioTimeChartJsVisualizer({
    css: 'audio-canvas',
    fftSize: 1024,
    container: 'chart-time',
    chartjsProps: {
        chartProps: {
            scales: {
                yAxes: [{
                    scaleLabel: {
                        labelString: "Amplitude"
                    },
                    ticks: {
                        maxTicksLimit: 5
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        labelString: "Time"
                    },
                    ticks: {
                        maxTicksLimit: 130,
                        beginAtZero: true
                    }
                }],
            },
            maintainAspectRatio: false
        },
        datasetsProps: {
            pointRadius: 0.1,
            borderColor: 'rgba(0,0,0,0.5)',
            backgroundColor: 'rgba(255,195,100,0.2)',
            barThickness: 2,
            borderWidth: 1
        },
        datasetsMinMaxProps: {
            pointRadius: 0.0,
            backgroundColor: 'rgba(0,139,141,1.0)',
            barThickness: 2,
            borderWidth: 1
        }
    }
});

const audioSpectrogramVisualizer = new AudioSpectrogramVisualizer({
    fftSize: 2048,
    container: 'spectrogram'
});

audioView.addVisualizer(audioCanvasFrequencyVisualizer);
audioView.addVisualizer(audioCanvasTimeVisualizer);
audioView.addVisualizer(audioChartFrequencyVisualizer);
audioView.addVisualizer(audioChartTimeVisualizer);
audioView.addVisualizer(audioSpectrogramVisualizer);

document.getElementById("listen").onclick = () => {
  audioDataSource.connect();
}

const inputChartElt = document.getElementById("input-range-chart");
inputChartElt.onchange = (event) => {
  document.getElementById("range-value-chart").innerText = inputChartElt.value;
  audioView.setGain(parseInt(inputChartElt.value));
}


← General →