Add shortcode to play sound


I am rather new to Wordpress backend and coding and would like to create a short code that can be put around a word in my post and when the user clicks the word a sound will be played.  I don't want to see a player...just have the sound played.  I would like to pass the content contained within the shortcode to the function.  So, it would look like this:


I am not sure how to do this...many thanks for your pointers!
Who is Participating?
meb_santosoConnect With a Mentor Commented:
1) I don't know about template, but only the player needs to be hidden.

2) Presuming that you already created a shortcode, an example would be:

This is the sound of how a [playaudio file="barks.mp3"]dog barks[/playaudio]

If this line is rendered, it will call and enclose the text 'dog barks' with a link that will call barks.mp3.

How to write your own shortcode is mentioned in my previous comment.

HTML5 Player is an audio player that is built in HTML5 capable browsers. The mentioned link explains that. Concerning the fall back scenarios, yes, it would be fine if you can provide your visitors with alternative scenarios, just in case their browser does not support the <audio>-tag. Alternatives:
First, you need to create and define what the shortcode(s) does (do). If you don't know how to do so, this is a pretty good tutorial :

Second, you need to have the player (obviously). You need to pass the parameter defined in your custom shortcode to the player.

As to not showing the player, you can simply add something like style="display:none;" to your player div. Since it's hidden, the play/stop control will not user-clickable, so in my opinion the player should be able to auto start and auto stop.

Maybe for future-proofing: HTML5 audio player: -- and fallback scenarios: flash player, and non-flash, non-HTML5 audio player.
1CougarAuthor Commented:
Hello and thanks for your comments.  So, if I understand correctly:

I would add a player to the page template that is hidden.

I create a shortcode that passes content to the function that will then pass the parameter to the player (this part I am not sure how to write...)--do you have an example of that?

Finally, regarding the HTML5 you mean I have multiple players?  Any idea of where to look for this and which ones to pick??

Thanks again,
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.