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

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>

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!

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!

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!

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.

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?

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?