Create a Music Player from YouTube Videos (Audio Only!)

GirlCalledBlu

Want to add just the audio of a YouTube video (without the video!) for a character playlist, soundtrack for a log, or general ambiance?

Here's a step-by-step of how to add this code to a wikidot wiki (sorry, MediaWiki folks, but I'm sure this code can also be adapted for that codebase!).

Create a page that will be where you store the raw source code (here's mine: http://ablusandbox.wikidot.com/musicplayer)
On this page, copy and paste the code provided:

[[html]]
<style type="text/css">.playerbutton{cursor:pointer;border:none;background:transparent;outline:none;display:inline;vertical-align:top;}.gaf210codes_youtubebox,.preload_box{width:1px;height:1px;overflow:hidden;visibility:hidden;position:absolute;display:inline}</style>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">function toggleButtonPlayer_aduVt(buttonobj){buttonobj.style.display="none";if(buttonobj.id=="gaf210codes-aduVt-playbutton"){document.getElementById("gaf210codes-aduVt-pausebutton").style.display="inline";}else{document.getElementById("gaf210codes-aduVt-playbutton").style.display="inline";}}/</script>
<div class="gaf210codes_youtubebox"><iframe width="250" height="250" src="https://www.youtube.com/embed/{$youtubecode}?enablejsapi=1&amp;fs=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;controls=0&amp;autoplay=0&amp;loop=0" onload="gaf210codes_aduVt=new YT.Player(this)"></iframe></div>
<button type="button" class="playerbutton" id="gaf210codes-aduVt-playbutton" onclick="gaf210codes_aduVt.playVideo();toggleButtonPlayer_aduVt(this)"><img src="http://i62.tinypic.com/axnot0.jpg"></button><button type="button" class="playerbutton" id="gaf210codes-aduVt-pausebutton" onclick="gaf210codes_aduVt.pauseVideo();toggleButtonPlayer_aduVt(this)" style="display:none"><img src="http://i57.tinypic.com/2mqugw2.jpg"></button><div class="preload_box"><img src="http://i62.tinypic.com/axnot0.jpg"><img src="http://i57.tinypic.com/2mqugw2.jpg"></div>
[[/html]]

Using the Wikidot "Include" code, you can now attach audio-only music to pages. It will create a mini play/pause button.

[[include musicplayer
|youtubecode=!!This is the alphanumeric code attached to the YouTube video. The best way to find this code is to click 'Share' on the YouTube video's page, and copy and paste the code at the end of the shortlink.!!
]]

Here's an example of the final product: http://ablusandbox.wikidot.com/musicplayerexample

There are ways to change the button graphics, and if anyone wants information on how to do that, I can show you how. Some wiki style guides may be better suited for different color buttons.

Enjoy!

lordbelh

@GirlCalledBlu Cool stuff.

GirlCalledBlu

Thanks!

P.S. I can't for the life of me figure out how to put code in boxes that don't evaluate the forum's code. Could someone point me in that direction? I didn't see it on the editor anywhere, so I assume it might be a hidden feature! XD

Glitch

@GirlCalledBlu

Put the codeblock between triple backticks `. Something like:
```
<html></html>
```

Will get you:

<html></html>

GirlCalledBlu

@Glitch Cool, thanks!

Puzzlebox

@GirlCalledBlu, thanks for posting this. I've been looking for this bit of code everywhere.

Can anyone confirm if the button is able to pause/stop once the play feature is initiated. I know this discussion was so last year ago (in the most literal sense), but I found when implemented the pause/stop feature was not enabled. Can you share if it can/does this?

Thanks.

-PB

faraday

@puzzlebox The places I've seen it used, it was able to play/pause, yes.

Puzzlebox

@faraday Yeah the above solution is allowing play only. I'd appreciate a second source to compare to to see what's different in the code. The only other place I've seen it is the 100 and that closed. I'm just a little bit dead in the water, but I do appreciate the feedback. Thank you.

faraday

@puzzlebox Wiki Source -- Example. @GirlCalledBlu set that up for us.

Alzie

Since it's the topic of wikidot, just thought I would add:

http://snippets.wikidot.com/

Puzzlebox

That is super helpful! Thank you so much!