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.
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.
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&height=402&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.
Did you actually figure out a way to make a WordPress plugin for Vocaroo that will auto embed the recordings in to your WordPress posts? If so, I really want this for my WordPress site. Is it possible to add the Vocaroo recorder to WordPress comments as well? That would be so awesome!
Not exactly, or at all. My theme accepts certain kinds of URLs for featured media, so it can detect a vocaroo URL and insert the embed code where featured media is displayed, it does not apply to the post or comments.
It would be easy if vocaroo had an API endpoint, it might be possible to do wp_embed_register_handler