Embed Local Audio in WordPress

Mindwatering Incorporated

Author: Tripp W Black

Created: 02/27/2019 at 06:21 PM

 

Category:
General Web Tips
HTML

Tip:
How to embed a local audio file (m4a and mp3) into a WordPress post.

If you running an older version of WordPress which doesn't support the [Audio] tag. (around 2.5 and earlier), then use the first option.

1. Generic HTML in Code Tag
<code><audio controls=""><source type="audio/mp4" src="/wp-content/uploads/yyyy/mm/mysongfile.m4a"><source type="audio/mp3" src="/wp-content/uploads/yyyy/mm/mysongfile.mp3"></audio></code>

Notes:
- Replace the yyyy/mm with the year and month folders of the media file imported into the library.
- We had to use the <code> tag in order for WP to not parse it. It's advisable to make sure your files don't have spaces or other special characters in them -- stick with just dashes, or underlines, or nothing, as word separators in the filename.
- In order for the source tag to remain intact, we had to put everything on the one line. Otherwise, the URL was split into separate strings at every folder slash.
- We also had to change the first source for the m4a to the audio/mp4 type (instead of the audio/m4a) type, as Firefox and Safari would not play the loaded audio files. (This is a licensing decision. You cannot embed an audio m4a, you can however embed the audio from a video/movie mp4 that contains m4a.)


2. Audio WP Tag:
[video mp4="/wp-content/uploads/yyyy/mm/filename.mp4"]

Audio:
[audio m4a="/wp-content/uploads/yyyy/mm/filename.m4a" mp3="/wp-content/uploads/yyyy/mm/filename.m4a"]




previous page