Basic Audio Player Embedding
For purposes of this example, I will be downloading some sample MP3 files to illustrate how we can upload and play them in our posts. So let’s assume that you have downloaded the audio file onto your desktop.
The process of insertion begins with the same steps that we used to embed an image file. In the WordPress visual editor, click “Add Media” to bring up the media library and the upload section in a tab on the left. Click the latter and use it to either select the audio file in question or simply drag and drop it onto the dialog box.
The upload starts automatically and once done, the right-hand pane is populated with details of the media. Then simply click “Insert into post” at the bottom right as shown below:
And voilà! Your audio player is automatically ready for use.
Linking to an External File with Shortcodes
If you view the HTML that we generated in our first example, you will see that WordPress internally uses the “audio” shortcode. As you can see, we use the “src” attribute to link to the external source. In your WordPress visual editor, click the “Text” tab next to “Visual” and paste the above code into the place where you want the media player to appear. Replace my example URL with the link to your media file as shown below:
And that’s it. No further work is necessary. Preview your post and you will see the familiar audio player that we got in the first section of this tutorial. From the users point of view, it makes no difference whether the file is hosted locally on your server or elsewhere. If you don’t use a CDN for your images, you really should consider one.
We should thank the WordPress team for making media inclusion so simple. It cuts down on a lot of additional work especially considering that web pages today are more resource heavy than ever before.