{"id":7008,"date":"2012-11-09T07:02:39","date_gmt":"2012-11-09T07:02:39","guid":{"rendered":"http:\/\/2slick.com\/web\/?p=7008"},"modified":"2012-11-17T05:42:36","modified_gmt":"2012-11-17T05:42:36","slug":"music-player-and-downloader-for-wordpress","status":"publish","type":"post","link":"https:\/\/2slick.com\/web\/music-player-and-downloader-for-wordpress\/affordablewebsitestips\/tutorials","title":{"rendered":"Music player and downloader for wordpress"},"content":{"rendered":"<p>I wanted to find a way to play mp3 songs from my WordPress posts in addition to letting visitors download the songs for free. &nbsp;jPlayer was an option, but it wasn't compatible with the theme I was using the functionality was limiting. I was finally able to create an mp3 player and allow download options using the Yahoo Music Player.<\/p>\n<p>Embedding Yahoo Music Player code on your website will make all links to mp3 files play music when clicked on. Here's what the Yahoo Music Player looks like:<\/p>\n<p><a href=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/yahoo_music_player.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"88\" class=\"alignnone size-full wp-image-7009\" title=\"yahoo_music_player\" src=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/yahoo_music_player.jpg\" alt=\"\" srcset=\"https:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/yahoo_music_player.jpg 550w, https:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/yahoo_music_player-300x48.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>Follow the instructions below to install Yahoo Music Player on your WordPress website and start playing MP3 songs in your posts.<\/p>\n<h3>How to install Yahoo Music Player on your WordPress website<\/h3>\n<ol>\n<li>Log into your WordPress website.<\/li>\n<li>Click on the 'Appearance' tab.<\/li>\n<li>Click on the 'Editor' option.<\/li>\n<li>Scroll down and click on the link 'Single Post' on the left side of the page.<\/li>\n<li>You are now editing the single.php script. Scroll down the script code all the way to the bottom and insert this code snippet\n<p><!--DEVFMTCODE--><pre class=\"devcodeblock\" title=\"Javascript\"><table class=\"devcodetools\"><tbody><tr><td>&nbsp;Javascript&nbsp;|&nbsp;<\/td><td style=\"background-image:url('https:\/\/2slick.com\/web\/wp-content\/plugins\/devformatter\/img\/devformatter-copy.png');background-repeat:no-repeat;background-position:50% 50%;width:16px;height:16px;\"\/><embed id=\"ZeroClipboard1\" src=\"https:\/\/2slick.com\/web\/wp-content\/plugins\/devformatter\/_zclipboard.swf\" loop=\"false\" menu=\"false\" quality=\"best\" bgcolor=\"#ffffff\" width=\"16px\" height=\"16px\" align=\"middle\" allowScriptAccess=\"always\" allowFullScreen=\"false\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\" flashvars=\"id=1&width=16&height=16\" wmode=\"transparent\" \/><\/td><td>&nbsp;copy&nbsp;code&nbsp;|<\/td><td style=\"cursor:pointer\" title=\"DevFormatter Plugin\" onclick=\"devfmt_credits()\">?<\/td><td width=\"99%\">&nbsp;<\/td><\/tr><\/tbody><\/table><div class=\"devcodeoverflow\"><table class=\"devcodearea\" width=\"100%\"><tr><td class=\"devcodelines\" width=\"1%\">1<\/td><td class=\"devcodelinesarea\"><pre class=\"devcode devcodeline\"><\/pre><\/td><\/tr><tr><td class=\"devcodelines devcodelinesodd devcodelinesodd\" width=\"1%\">2<\/td><td class=\"devcodelinesarea devcodelinesareaodd devcodelinesareaodd\"><pre class=\"devcode devcodeline\"><span style=\"color: #339933;\">&lt;<\/span>script src<span style=\"color: #339933;\">=<\/span>\u201dhttp<span style=\"color: #339933;\">:<\/span><span style=\"color: #006600; font-style: italic;\">\/\/mediaplayer.yahoo.com\/js\u201d&gt;&lt;\/script&gt;&lt;!-- yahoo music player --&gt;<\/pre><\/td><\/tr><\/table><\/div><\/pre><!--END_DEVFMTCODE--><\/p>\n<p>just above '<!-- end #main -->' markup.<\/p>\n<p>Here's an actual picture of the location to insert the code snippet.<\/p>\n<p><a href=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/media_player_snippet.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7010\" style=\"border: 1px solid black;\" title=\"media_player_snippet\" src=\"http:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/media_player_snippet.jpg\" alt=\"\" width=\"395\" height=\"303\" srcset=\"https:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/media_player_snippet.jpg 395w, https:\/\/2slick.com\/web\/wp-content\/uploads\/2012\/11\/media_player_snippet-300x230.jpg 300w\" sizes=\"auto, (max-width: 395px) 100vw, 395px\" \/><\/a><\/li>\n<li>Click the 'Update File' button.<\/li>\n<\/ol>\n<h3>How to post mp3 music in WordPress website that uses Yahoo Music Player<\/h3>\n<p><iframe loading=\"lazy\" src=\"http:\/\/www.youtube.com\/embed\/HH21jAhan9M\" frameborder=\"0\" width=\"640\" height=\"360\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I wanted to find a way to play mp3 songs from my WordPress posts in addition to letting visitors download the songs for free. &nbsp;jPlayer was an option, but it wasn&#8217;t compatible with the theme I was using the functionality was limiting. I was finally able to create an mp3 player and allow download options [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7012,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6],"tags":[598,69,597],"class_list":["post-7008","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wordpress","tag-mp3","tag-wordpress-2","tag-yahoo-music-player"],"_links":{"self":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/7008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/comments?post=7008"}],"version-history":[{"count":3,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/7008\/revisions"}],"predecessor-version":[{"id":7014,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/7008\/revisions\/7014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media\/7012"}],"wp:attachment":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media?parent=7008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/categories?post=7008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/tags?post=7008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}