xabriel / listen-to-wikipedia

Live, generative music from Wikipedia edits
http://listen.hatnote.com
Other
1 stars 1 forks source link

Update the JS libraries, see if we can make it work on mobile devices in the background via Web Audio? #3

Closed xabriel closed 1 year ago

tchin25 commented 1 year ago

I actually don't know how possible this is since as far as I'm aware, all Javascript stops running when the browser is put into the background. Maybe in the world of PWAs and service workers there's a way to keep the audio feed going

xabriel commented 1 year ago

The folks at https://howlerjs.com have a 'Music Player' demo that works on mobile and in the background, at least on my iOS device.

I presume this all works since there is an exception for audio sources? Not sure, but I'll try this all out!

tchin25 commented 1 year ago

The issue is that each individual note here is its own audio file that's triggered by javascript whenever an event comes in. The individual audio files themselves are playable in the background, but we can't queue up more files when the website itself is in the background since the javascript would be suspended

xabriel commented 1 year ago

Yeah, you're right.

I tried a couple hacks, to see if I could go around it, but it didn't work.

For posterity, I tried a couple permutations of the following:

        // Enable background play on mobile by always playing a silent sound in a loop.
        background_play = new Howl({
            src : ['sounds/silence.mp3'],  // a silent mp3
            loop: true,
            autoplay: true,
            volume: 0.2,
            html5: true,
            onload: function() {
                console.log('Started silent loop to enable background play on mobile.');
            }
        });

I still think we could hack this by generating the sound stream on a server, but that is out of scope from this hackathon, and probably too resource intensive.