Spherical forums

User-Made => Projects => Topic started by: Fat Cerberus on September 17, 2017, 01:28:20 am

Title: mp3 SoundStream demo: mp3 playback in JS!
Post by: Fat Cerberus on September 17, 2017, 01:28:20 am
This is a demonstration of playing an mp3 file completely in script.  Decoding is done directly in JavaScript without any help from the engine, using the Aurora.js library.  Playback is facilitated by a Sphere v2 SoundStream object.  miniSphere 5.0b2+ is recommended; while the demo will work in 4.8.8, the audio might stutter due to Duktape not really being up to the task.

Update 2017-09-22: Updated for API changes in miniSphere 5.0b2/4.8.8
Update 2017-09-17: Added a cool visualization effect.

Get the demo:
https://drive.google.com/open?id=0BxPKLRqQOUSNTlBwU1dwSnU4REk
Title: Re: mp3 SoundStream demo: mp3 playback in JS!
Post by: Fat Cerberus on September 17, 2017, 11:32:57 pm
I updated the demo and added a nice visualization that I won't spoil here. ;)  Try it out!
Title: Re: mp3 SoundStream demo: mp3 playback in JS!
Post by: Fat Cerberus on September 18, 2017, 11:24:49 am
In the process of making this demo I discovered a few deficiencies in the Sphere v2 API, so I've fixed those for the next mS 5 beta :D

Title: Re: mp3 SoundStream demo: mp3 playback in JS!
Post by: Rhuan on September 18, 2017, 05:12:04 pm
Hmm very interesting concept, linked sound and music - I feel like that should have a game related application.
Title: Re: mp3 SoundStream demo: mp3 playback in JS!
Post by: DaVince on September 19, 2017, 10:14:53 am
Yeah, now we can code something like Audiosurf if need be.

This has some great applications and possibilities. :)
Title: Re: mp3 SoundStream demo: mp3 playback in JS!
Post by: Fat Cerberus on September 19, 2017, 10:52:58 am
If anyone's curious, two from() queries are used to drive the visualization:
Code: (javascript) [Select]
// calculate the current VU for this frame (for visualization)
let amplitudeL = from(samples)
.where((v, index) => index % 2 == 0)
.reduce((a, v) => Math.max(Math.abs(v), a), 0.0);
let amplitudeR = from(samples)
.where((v, index) => index % 2 == 1)
.reduce((a, v) => Math.max(Math.abs(v), a), 0.0);
this.vu1 = (amplitudeL + this.vu1 * 4) / 5;
this.vu2 = (amplitudeR + this.vu2 * 4) / 5;

(The code for this in the demo is a bit different; I've refactored it locally since posting it)
Title: Re: mp3 SoundStream demo: mp3 playback in JS!
Post by: Fat Cerberus on September 21, 2017, 12:35:17 pm
I updated the demo with code changes to support to most recent beta (5.0b2).
Title: Re: mp3 SoundStream demo: mp3 playback in JS!
Post by: Fat Cerberus on September 22, 2017, 11:25:38 am
I was thinking last night, I should probably move the actual mp3 player functionality out into a class that can be used in other games.  At least once I fix the bug where it crashes the game at the end of playback...