Sunday, April 10, 2011

YouTube Audio Player

While I was procrastinating on my essay for GSW, I’ve made a couple slight changes to
the YouTube
Audio Player
that should make it a little better.

Firstly, I’ve given you the
ability to allow YouTube to set cookies.  I’m not sure why anyone would be interested in doing this for a
Music player, but its there.  I guess the primary reason I set this is because youtube-nocookie wasn’t
working properly the other day, as I soon found out from a comment on my blog.  So if it isn’t showing up,
you should allow YouTube to collect cookies.

The second, and by far the more important
change is embedding the link (in the event that neither the object nor the embed shows) in a <noembed>
tag.  I’m not quite sure how I didn’t know about the existence of this tag, but I’ve gone ahead and
programmed it in properly, which should get rid of the annoying duplication some users have been seeing on
any players generated from this point forward.

And one last change I made while working
on this blog post, I created an API!  So now you can generate them on the fly if you want to and get just
the HTML for the player.  I’ll document the API below:

http://www.gtaero.net/ytmusic/?api=1


  • &q=

    • The URL to the YouTube Video or Playlist




  • &a=1

    • Only Add if you want the music to AutoPlay




  • &loop=1

    • Only Add if you want the music to Loop




  • &js=1

    • Only Add if you want to be able to use the
      JavaScript API with it



  • &s=on


    • Add if you want to enable the Progress Bar on the video.

    • &psize=
      This is the progress bar size, acceptable variables are below

      • s –
        Small, This will set the width of the video to 150px

      • m – Medium, This will
        set the width of the video to 187px

      • l – Large, This will set the width of
        the video to 224px

      • &tc =1

        • Only
          Add if you also want to show a timecode.  Only works with progress bar.  Changes the follow sizes to the
          corresponding pixels:

        • s – 225px

        • m – 262px


        • l – 299px








  • &invis=1

    • Add if you want to make the player
      invisible.  Note: People hate this.



  • &html5=1


    • Add if you want to use YouTube’s HTML5 player. You shouldn’t use this.  Its VERY buggy.




  • &cookie=1

    • Add if you’re okay with YouTube
      setting cookies on the user’s computer.




And
that’s all!  Enjoy!

30 comments:

  1. the part for the progress bar did not work for me, its alway ignored

    ReplyDelete
  2. @ab35f1c654d01628dcb1e3a19b3866d2:disqus: My documentation is incorrect. It should be
    &s=on.

    ReplyDelete
  3. when I pasted my youtube playlist url into your"YouTube Audio Player" form the player
    can't work, how to fix this?

    ReplyDelete
  4. The Playlist Support doesn't appear to work...

    ReplyDelete
  5. [...] Youtube Audio Player na web: YouTube Audio Player « Navarr’s
    Tech Side Vai surgir um grande amor na sua vida? Descubra que dizem as cartas adn.cartas-de-tarot.com –
    ver A YouTube Audio Player For TumblrTumblring— URL To Video: [ test] Tiny (Not Compatible with
    Progress Bar) Progress Bar www.gtaero.net/ytmusic – ver Harpa Crista O Bondoso Salvador Audio mp3
    legenda no Player … YouTube Audio Player. While I was procrastinating on my essay for GSW, I–ve
    made a couple slight changes to the YouTube Audio Player that should make it a little better.
    tech.navarr.me/2011/04/youtube-audio-player.html – ver [...]

    ReplyDelete
  6. Hi Navarr, looks like YT changed the embed code and the crop of the embedded object
    ain't working anymore... I'm researching a solution and am subscribing to this post case you happen to find
    it first :)

    ReplyDelete
  7. Looks like they changed to the new player even through embed.  There must be a way to
    embed the older flash player, but I'm not sure what it is. :

    ReplyDelete
  8. It is possible to crop the iframe (http://stackoverflow.com/a/5676721/1287812), but
    this solution will require putting an image on top to start playing through Javaspcript... BUT, I just saw
    in the new embed code: version=3 
    If we put ?version=2&ETC, it works!

    ReplyDelete
  9. I see that you put version=1... yep, gotta be better this way... I'm updating
    Audio-Tube as well, cheers :o[)

    ReplyDelete
  10. You might be interested to know that you can specify &theme=light or &theme=dark
    ;)

    I added it to my page. I really need to do a graphical design to that page and
    rewrite the PHP.

    ReplyDelete
  11. You don't have my plugin installed, do you? Light and dark are in the option page ;p
    http://wordpress.org/extend/plugins/audio-tube/screenshots/

    ReplyDelete
  12. As you can probably tell, I don't wordpress much. :p So no. But if I start a music blog
    or my personal blog back up I'll be sure to! :)

    ReplyDelete
  13. Rewrote the generator into a PHP class today.  You might like it.  Its up on github.
     Fork it and pull req any good changes, okay~? ;)


    https://github.com/navarr/ytaudio 

    (Its
    also fully XHTML compatible now.)

    ReplyDelete
  14. Copy that. Will revisit the plugin soon and implement. Cheers! ¡o)

    ReplyDelete
  15. Thank you SO MUCH for this. I was ready to tear my hair out when Youtube's latest
    changes broke all my progress-bar-only embeds (again!); I am incredibly glad to have found your Youtube
    Audio Player. This will make it SO much easier to fix everything. Thanks. :)

    ReplyDelete
  16. Hey Navarr, could you update the bookmarklet on navarr.me/ytaudio to use 'ytaudio'
    instead of the old 'ytmusic'? Also could you just try it out generally for yourself ..on my end it kinda
    stopped
    working some months ago.

    anyways, thanks for the cool low-CPU-usage
    alternative!

    ReplyDelete
  17. I've updated the bookmarklet and it all seems to work!

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Audio Equipment Kits: This incorporates the rental of audio gear and open recipient sound frameworks. Stage equipment and lighting in Orlando at americanaudiovisual.com

    ReplyDelete
  20. They can likewise save money on space, infrastructural costs, and interest in new advances and preparing programs. Spanish audio transcription

    ReplyDelete
  21. I enjoy it for creating the details, keep up the truly amazing perform continuing
    best logo design company

    ReplyDelete
  22. Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also best logo design company

    ReplyDelete
  23. You are paying for a help - the measure of time you ought to spend repairing or altering the archive so you can utilize it MUST BE insignificant to none... spanish transcription services

    ReplyDelete
  24. I enjoyed reading your post. I will share it with my other friends as the information is really very useful. Keep sharing your excellent work. visit here speaker hire

    ReplyDelete
  25. The insurance provider can also help the individual locate all the audiologists in the area. For this it would be best to find an insurance officer in the near locality and ask for their help.long island audiology

    ReplyDelete
  26. I'm thinking about phenomenal audio created and the best mixing headphones put on your web site with quickness and ease by anyone...even someone who isn't technical. This is "web audio" at its absolute finest.

    ReplyDelete
  27. As a student, you will be exposed to a real world theoretical knowledge and dcm loudspeakers applications, critical listening skills, aesthetics and issues of audio, music and sound.

    ReplyDelete
  28. You have done good work by publishing this article here. I found this article too much informative, and also it is beneficial to enhance our knowledge. Grateful to you for sharing an article like this.speaker hire Melbourne.

    ReplyDelete