How to display audio files in SDL MediaManager without iframe?

Question

I created new outlet for SDL Media manager. It has to be used to reproduce audio files.

I have an problem with displaying audio files. If I chose outlet type 'audioplayer' audio file will be displayed in iframe. Visually it is displayed correctly but I cannot use iframe on the site. Is there any option to change outlet type html and display it as html5.

I also tried to choose outlet type html5.

Audio file can be played, but it is displayed as video.

Do you have any suggestion how to make custom html5 player for the audio files?

Answer 1

Media Manager has a restful service where you can retrieve content as JSON.

It is possible to completely bypass having Media Manager send you an outlet, and instead grab the JSON, and render the markup yourself.

assume a distribution url https://poc5.dist.sdlmedia.com/Distributions/?o=7045941B-0652-49ED-A5A9-240A91636FE5

Switch out Distributions/o= for json. So you get https://poc5.dist.sdlmedia.com/json/7045941B-0652-49ED-A5A9-240A91636FE5

In that json, you want to look at assetContainers[0].assets[0].renditionGroups. You'll see a fully qualified url to the raw asset there.

So, you could write JavaScript that does the following:

1. Reads the url and switches it to json
2. Does an ajax request to get the data
3. After getting the data, finds the raw audio file
4. Creates an <audio> element and adds the url to it

I don't have a perfect example, but a few years back I made a jQuery plugin for video outlets in Media Manager: https://github.com/paceaux/Media-Manager-Plugins-for-Tridion (demo of it here: https://jsfiddle.net/Paceaux/ubbzo87t/ ). It follows the exact steps I outlined, except it feeds the source into a <video> and a <canvas>.

I also wrote a blog post that highlights these high-level details of the jQuery plugin. I think you could follow these steps to make a plugin of your own.

I had never thought to make it work for audio, but I'd certainly welcome a pull request!