Howler.js: Compatibility with streaming audio from WebRTC

[ben-pr-p]

Hello,

I'm interested in using Howler for a VR-ish web experience using WebRTC for audio transmission – does Howler accept mediastream src's and can it perform its transformations fast enough for real-time playback?

[goldfire]

There is no support for MediaStream right now, but I've marked it in the "future" milestone as it could make a good plugin. Performance shouldn't be an issue on the part of howler.

[dburongarcia]

Hi, any news about WebRTC support?

[ampeixoto]

Any news on this?

[Blunderchips]

Any news on this?

[cybersupernova]

I assume howler will not supporting MediaStream any time soon

[gruckionvit]

Can you give an example of how this is supposed to work?

[gruckionvit]

There is no support for MediaStream right now, but I've marked it in the "future" milestone as it could make a good plugin. Performance shouldn't be an issue on the part of howler.
can we get an update of when this will be available? Some coaching would be appreciated if you want me to do it.

[jzombie]

Apologies if this is the wrong thread.

Maybe someone will find it useful.

---

I figured out how to make this stream over WebRTC.

The secret is to start the audio timer (i.e. just attach it to a non-mounted audio node; see below).

Then, obviously, you need to publish the audio media stream tracks to the other peer(s).

Note: This is modified from example posted at: https://jsfiddle.net/chadananda/kvzrsx5t/84/

import { Howl, Howler } from "howler";

const audioURL =
"https://cdn.glitch.com/02dcea11-9bd2-4462-ac38-eeb6a5ad9530%2F331_full_beautiful-minds_0171_preview.mp3?1522829295082";

Howler.mute(false); // to initialize Howler internals
const streamOutput = Howler.ctx.createMediaStreamDestination();

// first disconnect
Howler.masterGain.disconnect();
// then reconnect to our new destination

// Howler.masterGain.connect(options.audioOutput) ??
Howler.masterGain.connect(streamOutput); // connect masterGain to destination

// Start the audio timer (note, this doesn't have to be mounted to the DOM)
const audioEl = document.createElement("audio");
audioEl.srcObject = streamOutput.stream;

// Note: html5 audio must be used for this to work
const sound = new Howl({ html5: false, src: audioURL });

const mediaStream = streamOutput.stream;

// Audio tracks
const audioMediaStreamTracks = mediaStream.getAudioTracks();

// ...
sound.play() // start the audio

[vkarpuram]

@jzombie Could you please elaborate on this? It looks like the code sample provided plays directly from audioURL

[jzombie]

@vkarpuram I'm using Howler to mix several audio sources (i.e. instrument samples) into a single channel and broadcast them to several participants over WebRTC, who don't necessarily have Howler running on their end (each participant being able to trigger instrument samples playing over that mixed channel).

Instantiating new Howler sounds and playing them automatically mixes them into the stream at this point, and no additional WebRTC negotiations are necessary to add / remove audio data this way (also have TTS servicing from Google mixed into the same channel [i.e. send request to Google / receive mp3 / add mp3 as Howler sound, and play it => all participants hear it]).

At the moment, when I got it working, I thought I had accomplished something pretty cool, but later realize it's probably not what this thread is about.

Maybe someone would still find it useful, regardless.