Add Music to WordPress

Want to add music to WordPress or create a WordPress music player? You are in the right place. In this WordPress music embedding article, we will show you the easy steps to add music to WordPress posts, pages, sidebar or footer. You will also learn how to create simple wordpress music player, make wordpress music playlist for your WordPress site, add music player to WordPress, make WordPress HTML5 music player. Best of all you can add music, music player or playlist to WordPress for free without any plugin.


Insert music songs / players into WordPress Pages Posts
Create WordPress music playlist
Make HTML5 music player for WordPress and embed into WordPress sidebar, footer, ….

Add Music to WordPress Pages and Posts

Add single music track to WordPress page or post

To add music to WordPress page or post is extremely easy. New WordPress versions can now allow you to directly embed music songs into your posts or pages, just like you add images files to WordPress. To do that, open a WordPress post or page, then click the Add Media button above your WordPress editor.
add music to wordpress posts and pages

You can then upload music files from your local computer to WordPress hosting service. You can also choose existing music songs from your media library online. There will be an ATTACHMENT DISPLAY SETTINGS section in the WordPress music embedding page as below. Make sure to choose Embed Media Player from the option list. Then click Insert into post to add music to WordPress site.

embed wordpress music player

Save your WordPress post or page, then browse it in your web browser, the default WordPress music player looks like below screenshot.

wordpress music player default
wordpress music player default

Note: You can use above method to upload and embed music songs to both WordPress pages and posts.

Add multiple music track to WordPress page or post and create a WordPress music playlist

WordPress also comes with the built-in capacity to allow music fans to upload multiple music tracks, publish and organize them in a single music playlist. To do that, open your WordPresss post or page editing window, click Add Media, select Create Audio Playlist from the left menu, you can then upload several songs and create a new playlist with them.

make wordpress music playlist

You will also be provided with basic music playlist customization options. For example, you can drag and drop a song to change its order n the music tracks. You can enable or disable Show Tracklist, Show Artist Name in Tracklist, Show Images in the Playlist Settings.

edit wordpress music playlist

Save or Publish your WordPress page or post, then open it in a web browser, the default WordPress music playlist looks like below.

wordpress music playlist default
wordpress music playlist default

You can use this method to add Music to WordPress home page.

Add Music to WordPress Sidebar, Footer or anywhere else

Except playing music songs in WordPress pages or posts, you can also embed a music, music player or player with playlist in your WordPress sidebar, WordPress footer section, head or top section or anywhere else. As all WordPress themes are designed differently. You can check see if your theme accepts widgets on the sidebar, footer or even header section of your WordPress site. To do that, log on your WordPress dashboard, go to Appearance, then Widgets. Drag the Text widget from the Available Widgets section on the left to your sidebar or foot widget area on the right to activate a WordPress widget.

add html5 music player to wordpress sidebar footer

Now you need to make an HTML5 music player and embed it into WordPress sidebar or footer. Here is the sample code:

<audio controls>
  <source src="http://beta.betterhostreview.com/wp-content/uploads/2014/08/How-Deep-Is-Your-Love.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 

Note: replace the music file URL with your own in the above HTML5 music video player for WordPress.

Save the change and preview your music player in WordPress sidebar or footer using your web browsers. Here is how it looks like in Firefox browser.

html5 music player for wordpress in firefox
html5 music player for wordpress in firefox

The HTML5 music video player for WordPress looks different slightly in various web browsers. Here is how it looks like on Chrome web browser.

html5 music player for WordPress in Chrome
html5 music player for WordPress in Chrome browser

Note: You can use this method to add background Music to WordPress sites or blogs.

best wordpress hosting service

One comment

  1. Thank you for the useful article!
    Any tips for how to make the music autoplay when page is opened? instead of user having to click “Play”?

    Thanks!

Leave a Reply