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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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,
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:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.