This was done pretty much over breakfast and I bet I spend more time writing this blog post than it took to code a new addition to the media supported by the SPLOTbox WordPress theme.

Blame/Credit DS106.

I’m on a little self dare to try and do the DS106 Daily Create every day, done over my breakfast time if possible. On January 11th I am 11 for 11.

Today was a throwback to a Daily Create from 7 years ago

I noticed in the responses by regular daily creators Ronald and Kevin they both had audio links pointing to voca.ro

I probably had come across vocaroo before but did not remember much about it – it’s been around since 2007, and to me that says a lot for a simple, free services. And using Vocaroo is pretty simple, there is a web based audio recorder (one click) that will publish your recorded sounds right there to a URL, no login/account needed. Why that sounds very SPLOT-like!

And right there in their About page is their privacy statement:

Vocaroo strives to collect as little user data as necessary, and is fully usable without any account or login. 

https://vocaroo.com/about

Plus in their information for schools you can find how to block their Google ads on a school network and a FIPPA/COPPA statement.

I tried it myself for a [silly] DailyCreate response

and afterward I quickly wondered what it would take to add support for Vocaroo to SPLOTbox.

The thing that makes this possible for me to do is if the service provides an iframe embed code that can be automatically determined from the URL for the item itself. For example, the link to my audio is:

https://vocaroo.com/1lPnPzc7SfDJ

or their social media shorter link

https://voca.ro/1lPnPzc7SfDJ

Right away I know that lPnPzc7SfDJ is more or less less a database ID that uniquely identifies my content. So then I peek at the iframe part of the embed code:

<iframe width="300" height="60" src="https://vocaroo.com/embed/1lPnPzc7SfDJ?autoplay=0" frameborder="0" allow="autoplay"></iframe>

and you can see that I can easily construct this based on the item URL

Adding to SPLOTbox first means I need a means to know if any URL is specifically one for Vocaroo, which means pattern matching to see if it includes either vocaroo.com or voca.ro.

Then I know I need a little bit of code that can convert the URL for the item to it’s embed code. I could get fancy and do regex but all I need to do is take the URL string and split on “/” characters into an array, and that ID number is the 3rd one on the array. The guts of the code are then:

if ( is_in_url( 'voca.ro', $url ) or is_in_url( 'vocaroo.com', $url )) {
	// split url by "/"- id is the 3rd element
	$url_array = explode('/', $url);

	return '<iframe width="100%" height="60" src="https://vocaroo.com/embed/' 
	   . $url_array[3] . '?autoplay=0" frameborder="0" allow="autoplay"></iframe>';
}

I change it up a bit to size the iframe to be 100% width.

I run a test version locally, and then update the code on http://splot.ca/box and there it is on the front page and as an entry.

The front page of SPLOTbox with the first entry an embedded Vocaroo audio player for new item "Vocaroo is in the Box"
Vocaroo embedded on the front of https://splot.ca/box

This is now available in the Github home for the theme, and updating themes is now spelled out there as well.

One note is that it is not enabled by default. Each of the media items supported is designated available or not in the theme options (as some use cases might want to limit the media sites to a subset). This is in line with the way I update themes, if there is a new option added, the default is as if it was not activated, since that was the state before the update.

If you update the theme, then you will need to do to the SLOTbox options, and activate Vocaroo.

Enable / disable Vocaroo and other services in the SPLOTbox theme options

Now this is nice, and was doable over the time of eating a bagel and drinking a cup or 12 of coffee (that is a joke, it was 7 cups).

But one might ask, about other services, and it has been asked before, why can’t Kaltura be used? This unfortunately is not possible since there is no way to start with a Kaltura link like this one from BCcampus:

https://video.bccampus.ca/media/Open+Education+StoriesA+Creating+and+reusing+problems+using+OER/0_hmwjpdp6

Now I have a sense that 0_hmwjpdp6 is some kind of database ID,. but I cannot find a direct route to it’s garishly long embed code (can you?)

<iframe id="kaltura_player" src="https://admin.video.ubc.ca/p/122/sp/12200/embedIframeJs/uiconf_id/23448488/
partner_id/122?iframeembed=true&playerId=kaltura_player&entry_id=0_hmwjpdp6&
;flashvars[streamerType]=auto&flashvars[localizationCode]=en&flashvars[
leadWithHTML5]=true&flashvars[sideBarContainer.plugin]=true&flashvars[
sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&
flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[
chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&
flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&
amp;flashvars[Kaltura.addCrossoriginToIframe]=true&&wid=0_0idjihsp" width="400"
height="285" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay
*; fullscreen *; encrypted-media *" sandbox="allow-forms allow-same-origin
allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals
allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation
allow-top-navigation-by-user-activation" 
frameborder="0" title="Kaltura Player"></iframe>

Now Kaltura does offer a way that possibly works in WordPress, it has an oembed Endpoint, or a link like

https://video.bccampus.ca/id/0_hmwjpdp6?width=608&amp;height=402&amp;playerId=23448552

And in theory, one could code in a way to add this as a provider to a WordPress site that would make it work like YouTube embeds videos, but you have to know in advance the server this is coming from. And essentially, there is nothing about a URL on its own like

https://video.bccampus.ca/media/Open+Education+StoriesA+Creating+and+reusing+problems+using+OER/0_hmwjpdp6

that identifies it as Kaltura.

So I am stuck here. The only way it could possible work is on a per site basis writing custom code to add that functionality via the SPLOTbox Extender plugin I made for this purpose (this is in theory, I have not tried it for Kaltura).

Maybe I need a few more breakfast sessions to mull this over, but I am pretty sure I am at the wall.

Still, I was rather excited to add Vocaroo directly to SPLOTbox. It’s a nifty audio solution where you want people to record and share audio, no fuss editing.

And Vocaroo is now In The Box.


Featured Image: Modified Effects Box! flickr photo by cogdogblog shared under a Creative Commons (BY) license to include a PNG of the Vocaroo icon and the screenshot image for SPLOTbox theme.

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Leave a Reply

Your email address will not be published. Required fields are marked *