We’ve got a meditation course where the faculty member wanted to have a guided meditation track and an optional musical background track with independently controlled volume. Initially, the audio was hosted on Panopto and the background tracks were from a SoundCloud playlist. The SoundCloud embed doesn’t have an independent volume control.
I started with a consideration of basic HTML audio options. I could definitely display two players and start/stop them with a central button and some javascript. I had independent volume controls. I could not remove elements of the controls though. It was a little better but I didn’t feel like it was much of an improvement. I also did something similar with an external player (plyr.io) but it had similar problems.
See the Pen
audio parallel meditation by Tom (@twwoodward)
on CodePen.
I thought I could do something with Howler JS which I’d messed around with at some point in the past.
This was much more like what I wanted. While I had to build the elements, I could control exactly what was there. Now I had one place to play/pause/stop both tracks and independent volume controls. I also set the background track to loop. Pretty nice and it felt much more unified.
See the Pen
howler meditation by Tom (@twwoodward)
on CodePen.
Now, what I needed to do was enable people to make new versions with different audio files. My normal solution here is to use URL parameters. That’s what I did here. There are now two pages, one is for filling out the form fields to associate the audio files and modify height/width. It also builds the iframe and gives you a button to copy it. The other page is the page that gets embedded. It looks for the audio files in the URL parameters.
You end up with an iframe like this.
<iframe src="https://experiments.middcreate.net/extras/audio-meditation/player.html?backgroundUrl=https%3A%2F%2Fia601805.us.archive.org%2F27%2Fitems%2Fmeditation-music-2019%2FMeditation%2520Music%2520%25282019%2529%2F07.%2520%2520Gurulike%2520%2520-%2520%2520New%2520Planet%2520%2528Meditation%2520%2526%2520Inspiration%2529.mp3&guidanceUrl=https%3A%2F%2Fd2y36twrtb17ty.cloudfront.net%2Fsessions%2F66820e81-766f-4907-976c-b2ac0154aefe%2F92032578-86e6-47e0-b405-b2ac0154af07-8d5686ac-780b-40f1-9bde-b2ac0154be4c.mp4%3FinvocationId%3D8ff7703e-0816-f011-a9f8-0a1a827ad0ec" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
That creates an embed like this.
This is super ingenius, and just playing with the sliders it provides a means for listeners to tune the activity to their own hearing range.
I got thinking too about some scenario where one might answer a few questions it responds with a mix that simulates maybe how someone very sensitive to loud environmental sounds could have a different experience in say a restaurant conversation. Or other ways to create soundscapes of variable audio intensity. Woah.
That is a great idea. I’d like to build out a set of accessibility experiences like that (although I then start to worry about making them accessible). I’ll put it on the list. 🙂
I keep meaning to get back into javascript and audio. This was a nice aside but I have a really strange soundscape interface design thing I built 5? 9? years ago that I want to rebuild.