Can I embed and play MP3s in a blog under AEM?

Avatar

Avatar
Level 1
davemc1
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
View profile

Avatar
Level 1
davemc1
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
View profile
davemc1
Level 1

14-04-2020

IS there some nifty trick or something to get embedded MP3 (audio) to play within our blogs? 

 

thanks,

davemc

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
Nikhil-Kumar
MVP

20-08-2020

@davemc1 There are two ways to it:

1. You can customize the DAM asset workflow for mp3 audio files.
2. Try using following snippet in your HTML component:

<figure>
<figcaption>Listen to the Music:</figcaption>
<audio
controls
src="/media/examples/music.mp3">
Your browser does not support the
<code>audio</code> element.
</audio>
</figure>

Answers (1)

Answers (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

14-04-2020

@davemc1,

You can store audio files in the AEM DAM; Sometimes content authors may not upload HTML5 supporting audio files, so you can utilise the "audio" process step (introduced by the AEM ACS Commons tools) https://adobe-consulting-services.github.io/acs-aem-commons/features/wcm-components/audio/index.html; it's a simple installation, just modify the existing "DAM Update Asset Workflow model".

Next, the component that plays audio. I don't think AEM ships an HTML5 Audio Component, so you would need to create one. It's easy. A dialogue selects the audio path from the DAM, and the HTML produced looks something like this: 

 

<audio controls>
  <source src="/dam/my-site/audio/rock/hello-world.ogg" type="audio/ogg">
  <source src="/dam/my-site/audio/rock/hello-world.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

 

Make sure your Asset Upload Restriction Configuration is configured - https://helpx.adobe.com/experience-manager/6-3/assets/using/configuring-asset-upload-restrictions.ht...

Once the HTML5 Audio Component is finished, you add the "allowed components" within your static templates via design dialogue or policies for your editable templates, so your content authors can start to use this content component in their blog articles.

I hope this helps.