Forum

Thread tagged as: Question, Blog

How do I add an audio player on one of my blogs?

I would like to add an audio player on one of my blog posts. How can I do that?

Melanie Lenci

Melanie Lenci 0 points

  • 6 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

You can create a Perch template using the HTML5 audio element (plus any fallback player you want to use for old browsers), and upload the file just like any other file.

Thanks, Rachel.

Now when I added the following to my post.html page the issue I'm having is that the audio player appears on every blog post, but I only have audio files on 2 of my blogs. What do I need to change so that the audio only shows up if there is an mp3 on that particular blog post?

<audio controls preload="auto" autobuffer> <source src="<perch:content id="audiomp3" type="file" label="MP3 File" order="1" />" /> <source src="<perch:content id="audioogg" type="file" label="Ogg File" order="2" />" /> Your browser does not support the <code>audio</code> element. </audio>

You need to add perch:if to your template.

R. K

I have tried adding the perch:if to:

<audio controls preload="auto" autobuffer> <source src="<perch:content id="audiomp3" type="file" label="MP3 File" order="1" />" /> <source src="<perch:content id="audioogg" type="file" label="Ogg File" order="2" />" /> Your browser does not support the <code>audio</code> element. </audio>

which is the essence of your instructions at: https://solutions.grabaperch.com/html-and-css/can-i-use-html5

The problem is I still can't get this to work and I have Googled a hundred different ways to try to find out and all I keep getting is WordPress solutions.

Can you help me further in showing me how to place the perch:if code around what you provide on your help page at https://solutions.grabaperch.com/html-and-css/can-i-use-html5 (besides, I think that this will help other users besides just me)?

Thanks, Rachel.

Try this…

<perch:if exists="audiomp3">
<audio controls preload="auto" autobuffer> <source src="<perch:content id="audiomp3" type="file" label="MP3 File" order="1" />" /> <source src="<perch:content id="audioogg" type="file" label="Ogg File" order="2" />" /> Your browser does not support the <code>audio</code> element. </audio>
</perch:if>

Meaning if audiomp3 is not present, the <audio> element will not appear.

Hope that helps!

Thanks so much, David.

I know I must be missing something because I pasted the below into my post.html blog file (varied slightly to center the audio player) but the audio player is still showing up on all my blog pages and not playing on my blogs with mp3 files on them.

I hate to ask for more help, but if you have any ideas I'll gladly take your advice!

<perch:if exists="audiomp3">
<div><p align="center">
<audio controls preload="auto" autobuffer> <source src="<perch:content id="audiomp3" type="file" label="MP3 File" order="1" />" /> <source src="<perch:content id="audioogg" type="file" label="Ogg File" order="2" />" /> Your browser does not support the <code>audio</code> element. </audio>
</perch:if></p></div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

What does <perch:showall /> output?

Thanks, Drew, but that didn't reveal anything new for me.

Since I'm not making much progress getting the player not to show up on all my blog posts, I'm going to try to tackle the other part of my question/issue.

So, with this code on my post.html template:

<perch:if exists="audiomp3"> <div><p align="center"> <audio controls preload="auto" autobuffer autoplay="false"> <source src="<perch:content id="audiomp3" type="file" label="MP3 File" order="1" />" /> <source src="<perch:content id="audioogg" type="file" label="Ogg File" order="2" />" /> Your browser does not support the <code>audio</code> element. </audio> </perch:if></p></div>

You can see a post I'm trying to add the audio at: https://resumerelief.com/blog/post.php?s=2015-03-24-my-interview-on-career-confidante-with-marie-zimenoff&preview=all

What I'm wondering is how to type in/add the mp3 within your blog admin/manage post feature so that I can get my mp3 to play through the audio player, not as a link opening up in a new window.

Thanks so much!

Drew McLellan

Drew McLellan 2638 points
Perch Support

I can't see that example, because preview only works for logged in users.

Do you have a functioning static HTML example, or are you trying to figure out the content management and the HTML all in one go?

I'm sorry, Drew. I should have thought of that.

I published an example draft so you can get an idea of what I'm trying and what's happening:

https://resumerelief.com/blog/post.php?s=2014-11-14-my-interview-on-win-winwork-radio-show

Does this help in offering any suggestions in what I should try next so I can type in/add the mp3 within Perch's blog admin/manage post feature so that I can get my mp3 to play through the audio player, not as a link?

Thank you!

Rachel Andrew

Rachel Andrew 394 points
Perch Support

That page is broken. You have three doctypes in it, none of which are HTML5 doctypes. You should only have one doctype on a page and if you are using HTML5 audio then you need to be using an HTML5 doctype.

There are Perch template tags being output which indicates that your template is incorrect.

Outside of Perch you need to ensure your page validates (as HTML5 if you are wanting to use HTML5 elements).

https://validator.w3.org/check?uri=http%3A%2F%2Fresumerelief.com%2Fblog%2Fpost.php%3Fs%3D2014-11-14-my-interview-on-win-winwork-radio-show&charset=%28detect+automatically%29&doctype=Inline&group=0

Then you need to make sure your template is correct and you cannot see Perch Tags in the source.

If your audio does not work once you've sorted out the HTML issues then let us know and we'll take another look.

Thanks, Rachel!

While I have plenty of cleanup still left to do on my page, I believe I fixed the multiple doctype issue, which you can check out at: https://validator.w3.org/check?uri=http%3A%2F%2Fresumerelief.com%2Fblog%2Fpost.php%3Fs%3D2014-11-14-my-interview-on-win-winwork-radio-show

That said, the audio player still isn't working yet on: https://resumerelief.com/blog/post.php?s=2014-11-14-my-interview-on-win-winwork-radio-show

...And the player is continuing to show up on all my other blog pages that don't have audio files.

This is why I'm wondering if I'm simply not adding the audio to my Blog Manage Posts section correctly??

Do you have any instructions/insight in how to actually add an audio file within an individual blog?

I am baffled.

Thanks for any help!

Rachel Andrew

Rachel Andrew 394 points
Perch Support

There are still multiple doctypes, you still have Perch template tags being output. Just View Source and you can see them.

You need to fix that first. If template tags are being output then the issue is that your template is incorrect.

You've been a huge help in directing me to rectify the way more issues than I thought I had.

At through the source code at https://resumerelief.com/blog/post.php?s=2014-11-14-my-interview-on-win-winwork-radio-show you should be able to see that I am pretty positive I rectified the multiple doctype issue and pasted the below because this is what the source code is currently showing for the audio component.

<img src="/perch/resources/radio-show-blockjpg-w320h240.jpg" alt="My Interview on Win-Win@Work Radio Show" /> </p></div>

<div><p align="center"> <audio controls preload="auto" autobuffer> <source src="" /> <source src="" /> Your browser does not support the <code>audio</code> element. </audio> </perch:if></p></div>

I included the image component, as my thought is that the audio would work similarly - pulling from the Perch Assets/resource folder.

My post.html code is <perch:if exists="image"> <div><p align="center"> <img src="<perch:blog id="image" type="image" align="center" width="320" height="240" crop="true" label="Image" order="4" />" alt="<perch:blog id="postTitle" />" /> </p></div>

<perch:if exists="audiomp3"> <div><p align="center"> <audio controls preload="auto" autobuffer> <source src="<perch:content id="audiomp3" type="file" label="MP3 File" order="1" />" /> <source src="<perch:content id="audioogg" type="file" label="Ogg File" order="2" />" /> Your browser does not support the <code>audio</code> element. </audio> </perch:if></p></div>

...I'm wondering if I need to adjust the type= to type="audio" or type="mp3 to get it to find the audio file in my resource folder or what else I should be doing in the code, as you made it easy with images to simply add them through the Manage Posts admin panel, but I can't figure out what I should be doing (if anything) on my admin panel as well to connect it with the audio I want on that blog.

Thanks again for any insight, as I know I am getting blind to all this.

Hi Melanie, you've still got multiple doctypes in there which won't be helping matters. It looks like you've got a few rogue <html> and <head> tags too.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

We really can't help while the page is like this, and there is little point trying to fix specifics until the general issues are fixed.

A suggested debugging process would be to

  1. Ensure the page is valid HTML
  2. Take Perch out of the equation by just hardcoding an audio player onto the page - at which point you know that your HTML is correct.
  3. Then turn that HTML into a Perch template.

Wow. I told you I was going blind. I feel like a nincompoop, but I think I have finally rectifies the multiple doc types, and extra <html> and <head> tags, yet still no functioning audio.

Dare I ask for any further suggestions based on my above post?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Have you managed to get a basic audio player working in HTML before turning it into a template? That would be the first step.

Since I never did figure out adding audio on my blog using a player, I had to ask (even though I'm not even sure this is technically possible), but is there any chance that anytime soon Perch will be adding the capability to add an audio player/file directly from the Blog admin dashboard in the same way we can add an image or a file within a blog post?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Yes, you can do that - we've been trying to help you do it.