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 never thought to make it work for audio, but I'd certainly welcome a pull request!

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!