{"id":20381,"date":"2021-02-15T15:00:10","date_gmt":"2021-02-15T14:00:10","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=20381"},"modified":"2021-02-12T09:27:51","modified_gmt":"2021-02-12T08:27:51","slug":"how-to-add-audio-files-and-playlist-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-audio-files-and-playlist-to-wordpress\/","title":{"rendered":"How to Add Audio Files and Create a Playlist on Your WordPress Website"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]The world is full of sounds that affect us in a variety of different ways. From lifting our mood or making us weep, to empowering us to stick to our exercise routine, sounds are an integral part of our everyday life.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Most brands use visual cues to create a specific aesthetic that will make them recognizable. But if you incorporate sounds into your marketing strategy, your website will become even more memorable and appealing to the audience.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The best way to organize songs or inspiring podcasts<\/a> on a site is to create playlists. That way, users can easily sift through the featured content, select what they want to hear, and play the audio file they like as many times as they please. In one of our previous articles, we discussed the best audio player plugins<\/a> you could use on your site. We also showed you how to embed a Spotify playlist<\/a> to your pages. This time around, we\u2019d like to demonstrate how to create a WordPress audio playlist using the platform\u2019s default options in Gutenberg, the Classic Editor, and Elementor.[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”music-banner”][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add Audio Files in WordPress<\/h2>\n

[\/vc_column_text][vc_column_text]Adding audio files in WordPress takes just a few clicks of your mouse. The platform supports .MP3, .M4A, .WMA, .OGG, and .WAV file types.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If Gutenberg<\/strong> is your preferred page builder, open the page or post where you wish to add the file. Click on Add Block<\/strong><\/em> and select Audio<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Audio <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can then upload a new audio file, select one from your media library, or insert audio from an URL.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Audio <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you choose the first option, you will be able to add a caption for the file once the upload is complete. Moreover, there are options on the right side of the screen allowing you to enable autoplay and loop effects, and adjust preload settings.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Audio <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Metadata can be edited within the media library itself. Upon selecting the file, you can change its title, specify the name of the artist and the album, add caption and description, and modify the file\u2019s URL.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Meida <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To add audio files in the Classic editor<\/strong>, first, click on Add Media<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, choose a file from the media library or upload the new one. All editing options are placed on the right side of the screen and are the same as in Gutenberg\u2019s media library.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In Elementor<\/strong>, you need to add the Audio<\/strong><\/em> widget to your page.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Elementor <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And then, upload the desired audio file.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Create a Playlist in WordPress<\/h2>\n

[\/vc_column_text][vc_column_text]At the moment of writing this article, Elementor and Gutenberg<\/strong> don\u2019t include a specific widget nor a block for making an audio playlist in WordPress. And if you don\u2019t feel like adding yet another plugin to your roster, there\u2019s a workaround.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In both page builders, you can add the HTML block\/widget to a page or post where you wish to display the playlist. Then, paste the following shortcode in the block\/widget:
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n

[ playlist ids = \"insert_track_ids_here\" ]<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To find out track IDs, go to Media > Library<\/strong><\/em>. Click on the file you wish to feature in the playlist and look for the ID in the address bar, at the end of the URL.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Track                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Alternatively, you can hover over the View Attachment Page<\/strong> <\/em>or Edit More Details<\/strong><\/em> within the library.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"View                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And then, the track ID will show up at the bottom left corner of the page.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Track                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This activity may be somewhat time-consuming if you plan on adding a lot of files at the same time, but for now, this is the only way of adding a playlist in Elementor and Gutenberg.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now that you know the track IDs, add them to the shortcode. Ours goes like this:
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
[ playlist ids = \"449, 453, 454\" ]<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After you save the changes, a playlist will appear on your site.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Playlist\"                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In the Classic editor<\/strong>, you should first press the Add Media<\/strong><\/em> button and then click on Create Audio Playlist<\/strong><\/em> on the left-hand side of the screen.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Create                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next up, select the desired files from the library or upload the new ones, and click the Create a New Playlist<\/strong><\/em> button in the bottom right corner.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Create                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, the Edit Audio Playlist<\/strong><\/em> window will appear on the screen. You can drag-and-drop the tracks to arrange them in the order that suits your needs and decide if you wish to display a tracklist, show artist name in the tracklist, and show images.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Edit                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And lastly, after all the tweaking is complete, click on Insert Audio Playlist<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Insert                        <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
How to Add a Playlist to a Sidebar in WordPress<\/h3>\n
[\/vc_column_text][vc_column_text]If you would like to add a playlist to a sidebar on your site, you can go about that by adding a Text<\/strong><\/em> widget to the section of your choice. First up, go to Appearance > Widgets<\/strong><\/em>, find this widget, and choose the sidebar area where you wish to display an audio playlist.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Text                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, click on Add Media<\/strong><\/em> and start creating your playlist.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Text                        <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Final Thoughts<\/h2>\n
[\/vc_column_text][vc_column_text]Adding audio files to your site can help your brand leave a lasting impression on users and make their browsing experience more pleasant and fun. And creating a playlist in WordPress doesn\u2019t require any particular skills or coding knowledge. Any layperson can do it, in just a few mouse clicks. The only downside of making an audio playlist this way is that there aren\u2019t that many customization options at your disposal. To avoid having to do any work in CSS, consider purchasing a fully-customizable theme with the audio playlist shortcode<\/a>.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
Learn how to create a WordPress audio playlist using the platform\u2019s default options and make your website more memorable and appealing to the audience<\/p>\n","protected":false},"author":4,"featured_media":20446,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,4,13],"class_list":["post-20381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=20381"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20381\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/20446"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=20381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=20381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=20381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}