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



  • 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!).

    1. Create a page that will be where you store the raw source code (here's mine: http://ablusandbox.wikidot.com/musicplayer)
    2. 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]]
    
    1. 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!



  • @GirlCalledBlu Cool stuff.



  • 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


  • Coder

    @GirlCalledBlu

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

    Will get you:

    <html></html>
    


  • @Glitch Cool, thanks!


Log in to reply
 

Looks like your connection to MU Soapbox was lost, please wait while we try to reconnect.