David We Say HTML5, You Say High Five!

With the launch of SoundCloud for iPad last week, we released one of your most-requested products of this year. Today, we’re following up with your second-most requested feature: an HTML5 widget.

And while we were at it, our front-end and design teams went back to the drawing board and turned the widgets into real social sound objects, giving your sounds even more context, putting them even more front and center.

Ta-da, here it is:

Some of the highlights of the first iteration are:

– Attractive new waveform design
– The timed comments now are more usable on the widget
– Better exposure of information like title
– Better sharing – Facebook, Google+ and Twitter sharing options

Nerd speak:

– Runs natively in the browser (more stable, less plugin-caused crashes)
– No flash, works well with all mobile devices
– Lower memory and CPU load requirements = lower energy consumption
– Open standards and open source allow for faster development

And here it is as a set:

See more examples of the new widget in action over at our friends at The Economist, Wattpad, Nickelodeon’s Big Time Rush, Britney, West African Democracy Radio, Birdy, Ed Sheeran, Natty  and Emmy The Great & Tim Wheeler.

And this is how you can get the new HTML5 widget:

  1. Click the ‘Share’ button on any SoundCloud page
  2. Click ‘Customize player’ and select HTML5 from the option tabs
  3. Change the appearance of the widget, copy the embed code and paste it to your website or blog

A few things to note:

  • This feature is currently in beta. Please post your feedback in the comments below so we can consider it for the next iterations of the widget.
  • The new widget currently only works as an embed for websites and blogs.
  • There are some issues with Internet Explorer, we’re working on it
  • Your existing widgets will not automatically update, if you want to test out the new HTML5 beta widgets, you’ll need to re-embed the new code.
  • HTML5 is currently only supported for the standard waveform player, not the mini or artwork.

Hey we’d love to hear your feedback, what do you think? Leave a comment below!

TechCrunch: SoundCloud Debuts Its New HTML5 Widget, Looks So Much Better Than The Old One

2,149 thoughts on “We Say HTML5, You Say High Five!

  1. Mogs Fuentes

    Promoting your site and
    having quality links could lead to increasing your site’s reputation.
    While most of the links to your site will be gained gradually, as people
    discover your content through search or other ways and link to it, Google
    understands that you’d like to let others know about the hard work you’ve put
    into your content. Effectively promoting your new content will lead to faster
    discovery by those who are interested in the same subject .

  2. Anonymous

    Not working for me on Safari, OSX Lion, does however work with Chrome and Firefox. Could you tell whether tracks will get picked you by Hype Machines crawler. This for music blogger is crucial. 

  3. Stylewalker

    I also like that the widgets note, even across various browser tabs, whenever another widget is playing and stop the current song whenever another is selected to play. Good work!

  4. Tobias H. 'Inofaith'

    Great stuff guys. 

    I hope that post-beta the scrolling will work better (clicking in the waveform doesn’t always land the play head on that exact position, but more before it)
    And that there would be a way to read the comments better, expand or so. But great stuff :D

  5. ☕dailycoffeebreak

    well done team soundcloud =) waiting for that for a long time.

    my first feedback:
    1. is there a trick to see a full comment? 
    2. you guys dont like links in comments right? ;)
    3. is there a plan to offer the download option again?

    cheers, a fan =)

  6. Es3190

    Great. Now for the gripes, haha:

     – Download link? Where did it go?
     – Waveform scrolling in-accurate. Try clicking on a waveform.
     – Not working in Firefox 3.6.15 (I know this is an old version)

  7. Pingback: Soundcloud + New player widgets | Lucid Blog

  8. Matas Petrikas

    if you mean wordpress.com blogs, we’ll try to update our existing WP plugin to support it and hope that WordPress will update to the current version. It could take a few weeks. Hopefully less.
    In a self-hosted WordPress blog, you should be able to paste the embed code as html, I guess.

  9. Matas Petrikas

    Mac, Win, Linux? We can’t reproduce it here, but it might be related to a specific track. If it’s your own, please make sure you have enabled the ‘apps’ streaming!

  10. Matas Petrikas

    – on what Safari and Firefox versions are you missing the waveforms? We can see them on all current Win and Mac versions we have here.

    – if you change the height of the waveform to 166, you shouldn’t see the info anymore. btw where did you copy the code? the format is a little bit strange.
    – download link is coming next week :)

  11. Matas Petrikas

    Waveform seeking will be improved. Do you have an example track you are seeing it most clearly?
    Firefox 3.6 support might be fixed later, but honestly? We already at 7, aren’t we?

  12. Es3190

    re. FireFox 3.6…Its not THAT old…Jan 2010. But anyway, the play button and waveform weren’t displaying. That was my issue with that.

    As far as waveform seeking, it seems that at first the seeking position is always to the left of the cursor, then improves as I go backwards then forwards again through the track. Not that big of a deal.

    my main issue is the downloads. ill wait for it.

  13. PIO HEFNER

    hi friends My player in html5 not working properly because my firebug throws the following message

    “unterminated string literal
    error source line: (function(){function require(a){if(!re…e(/&(?!w+;|#d+;|#x[da-f]+;)/gi,”&am”Thank you

  14. Charlie

    ability to hide comments? ability to favorite from the widget? could you make it to where we can comment within the widget? will there eventually be a more minimal one like the standard player (shorter and hides info and play button isn’t above the waveform)? and a super minimal one like the current minimal player? although usually impractical, a volume adjustment is useful/convenient for some users.

  15. Anonymous

    Thanks Matas, I tested them and they are working really well. Will be sticking with the traditional flash ones until Hype Machine’s crawler knows how to pick them up. Great work ! 

  16. Chris Jarman

    Single track looks great, but the set version has too much empty space when using a few tracks.

    Would be better if the set version would snap to size depending how many tracks are in the set for things like singles and eps.

  17. Jean-Paul

    Awesome work guys. Works fine in Chrome and Safari in OSX Lion, also works perfectly on my iPhone’s IOS5. So great to finally have a working Soundcloud widget for Apple’s mobile devices. Thanks for that!

    – I’m really hoping and waiting for a mini player, pretty similar to the current Flash one. 
    – Set version should snap to size, its taking too much unnecessary space at the moment.
    – More options in the sharing screen would be great instead of manually editing the code (comments and stuff like that).
    – Maybe a bit more flexibility in editing the background/border colors (perhaps under a “advanced” tab).

    Seriously though, great job. High five indeed.

  18. 88-Keys 

    Cool. So, anyway to download a full set with one button tap? I thought THAT would be the most requested feature, unless I’m missing something here & you’ve already done that in an update or something. Please say, “yes”.

  19. Africa zur hoffnung

    hi Dear…is very coooll th Musik…….i love musikkkkk…..:)
    …Diferent,   But   “””Very  coooool   “”…:)

  20. Africa zur hoffnung

    uuuaaaauuuuhhh….so manny memories….i ear long time that type in movie….i love thisssssssssssssssssssssssssssssss

  21. Thomas Michalak

    Looks very cool. 

    For those using WordPress, check out Soundcloud is gold WordPress plugin. It’s easy, you don’t have to type shortode as the plugin insert it for you. You get a live preview when modifying settings, general option page that manage all your players on your site and it’s neat ;)

    http://wordpress.org/extend/plugins/soundcloud-is-gold/

    I will add the new html5 player to the option this week-end.

    @SoundCloud developers: There’s a bug in the share popup window. If you click the html5 tab and then go back to the standard, it will give you the html5 code (iframe) instead of the object to copy. (Bug occurred on osx 10.6 with chrome 14)

  22. Anonymous

    Looks very cool. For those using WordPress, check out Soundcloud is gold WordPress plugin. It’s easy, you don’t have to type shortode as the plugin insert it for you. You get a live preview when modifying settings, general option page that manage all your players on your site and it’s neat ;)http://wordpress.org/extend/pl…I will add the new html5 player to the option this week-end.@SoundCloud developers: There’s a bug in the share popup window. If you click the html5 tab and then go back to the standard, it will give you the html5 code (iframe) instead of the object to copy. (Bug occurred on osx 10.6 with chrome 14)

  23. ktodam

    Win7. It was the track above. Today it works :) Great job! We will update it soon at http://www.elektroaktivisten.de/ !

  24. Mark Jenkins

    We were simply migrating old players to new. We normally just copy and paste into a new post, which is what we’ll be doing from now on.

    There is a plugin called Soundcloud Gold, which hopefully will be updated to use the HTML5 version too soon

  25. Cage Cafe

    Also it would be cool if you could add a download link as an option ( where you have the buy button now ), so people who use services such as Topspin or Bandcamp for free downloads. 

  26. Danielmanzaroli

    thank you soundcloud for amplifying your world full of great music from many different part of the globe i am hooked

  27. Jeff Tolbert

    Love the new player! Wish list would be to make it more customizable so it takes up less vertical real estate. I’ve already shortened it about as much as I can, but I’d love the ability to hide the set info at the bottom and a smaller play button option.

  28. Fred Bean

    The audio player doesn’t seem to work in Firefox 7. No matter where I
    click on it I don’t get any sound. I suppose it’s almost HTML5 rather than
    actual HTML5.

  29. Markus Angermeier

    hi david,
    some beta feedback:just checked on android 2.3.4 (htc flyer). android standard browser: widget and playlist display just as blank grey boxes.dolphin hd: widget stays blank, playlist is visible and plays sound as well.firefox (fennec): all is visible, but i could get it to play. no +1 in share.opera mobile: widget and playlist are fine, plays music, even comments work nicely. share +1 broken and breaking layout a bit.

  30. Theeastonellises

    Finally!  iPad and iPhone friendly.
    Only complaint is there is NO DOWNLOAD button, but I saw that is coming in the threads below. 
    Still, I’m switching to the HTML 5 NOW!

  31. rchrdnsh

    Great work. This needs to replace the current flash widget fast. And it needs to share to Facebook AND PLAY INSIDE of Facebook as well; no going to another URL. I Also need this in the album and mini player versions as well. I’d also like to see a black version, or have the ability to completely customize ALL of the colors of every part of the widget. Similar to the customization options of Root Music’s Facebook Band Page app.

    This all needs to happen ASAP.
    But, as I said to start, great work.

  32. Kristian "fjern"

    My set looks a lot better now with the artwork on my website. I would love to have sets like this on the SoundCloud page itself!

    Things that I’m missing for it to be better on my website are:

    – It doesn’t work on all the songs
    – Download buttons (also, could “download set” be a possibility?)
    – Hide comments
    – There’s some large areas of empty space, especially after the last song, and the bottom part of the waveform.
    – Is there any way for me to adjust the artwork size?

    It’s embedded in the right column here, and I’ve been using the plugin SoundCloud Shortcode for a long time: http://rognalf.com/

  33. Kristian "fjern"

    Ah, I guess the large area at the bottom lists the set description. I would rather have it display the info text from each individual song. Sounds tricky to solve, but if possible, that would be neat.

  34. Pieter Leijten

    Great! I’ve just implemented it on my site. Everything works ok, except scrolling the playlist on ios. Ff, safari and ie are all working fine btw.

  35. Guigz Axehead

    Guys

    Great breakthrough products : Finally soundcloud widgets will play on mobile devices ! 

    One problem I have: 

    I have 11 tracks : All have widgets and apps enabled but there are 3 tracks for which the HTML 5 widgets don’t work… don’t understand…looks like a bug
    Can you please check?

    Thanks

    Guigz Axehead

  36. Anonymous

    Soundcloud is Gold has been updated to integrate the new html5 player :)

    Download or Update to version 1.0.5 to try it.

    http://wordpress.org/extend/plugins/soundcloud-is-gold/

    Remember that Soundcloud released this player as Beta. If you find any bugs I created a topic on the Plugin forum for it. That way I will be able to check if the bug is related to the plugin or the player and then post them here.

    Cheers

  37. Anonymous

    Soundcloud is Gold has been updated to integrate the new html5 player :)

    Download or Update to version 1.0.5 to try it.

    http://wordpress.org/extend/plugins/soundcloud-is-gold/

    Remember that Soundcloud released this player as Beta. If you find any
    bugs I created a topic on the Plugin forum for it. That way I will be able
    to check if the bug is related to the plugin or the player and then post
    them here.

    Cheers

  38. Esam Hammad

    I can’t see the widgets!?
    I’m using Safari on macbook, any configuration needed on my part? I’ve been waiting for this to build into my site. 

  39. Dave de Jong

    Waveform and autostart not working on android browser. Player canvas too high. White canvas doesnt look good on dark sites. A mini player html 5 would be great too. 

  40. Djgmani

    how do i do this on my wordpress.com blog, i try to post it on my music page through visual and html but it does nothing…

  41. Darren Zytkiewicz

    Is there any discussions about the mini player having a drop down reveal for shares of sets that also includes # of plays, # of favorites and # of comments with track/album art?

  42. self-titled

    This doesn’t appear to be working at the moment. Any idea when it’ll be fully functional again?

  43. Dan

    Unlike existing widgets, the HTML5 widget doesn’t appear to work well with private tracks (“Oops! This sound can’t be played outside of SoundCloud.”).  Any plans to address this?  It’s central to how I use Soundcloud.

  44. Kevin Clark

    I’m having issues embedding my own players on Chrome 15 on windows XP and Mac OS X (snow leopard). I can now play the examples in this post, but can’t find what “apps” streaming button I’m meant to activate. 

  45. Giona

    With SOUNCLOUD IS GOLD (at the moment) it seems you cannot add a player with all the tracks of a user… 

  46. Punk Rock Kick

    looks boss … but useless without a download button.. otherwise than that .. soundcloud will always rock and always worth the money.

  47. Ben

    Currently working them into our site, works great on iPad, iPhones with iOS4 & iOS5.

    Also works great in Google Chrome & Firefox on Mac. DOES NOT LOAD in Safari on MAC or in Internet Explorer on PC. 

    Other issues/suggestions with the player (some have already been stated):
    – The scroll down does not work on mobile devices,
    – There is no download feature which is a must!
    – Cannot favorite or comment from player (i don’t think the old one did either).
    – The transparent comment bar seems to be overly big?
    – A choice of the bottom bar being on or off in the set players.

    Thanks :-)
    Ben

  48. Guest

    This works well on my site – doesn’t resize as well (height-wise) as the Flash widget, but still, this is a major step forward.

    If this were embedded using an object or embed element you could have the Flash widget as a fallback…

  49. Sebastien Lintz

    I have some feedback, 

    If I disable statistics in the player its says 0 plays, 0 favorites etc. Its better maybe to remove those statistics if I enable the option disable statistics (pro user). 

  50. rchrdnsh

    So, the HTML5 player does not seem to work on Android phones… I tried my site using the player on several android phones and none of them loaded the player. It was just a big blank white space…

  51. rchrdnsh

    I agree completely! I would at least like a black version, for my site is dark… and make it work on Android phones, yo!

    Please :-)

  52. Drastic

    I can’t get the artwork to show. I see it in soundcloud but when embedded on the web page it’not there anymore…

  53. James hesford

    I am using HTML 5 with a couple of single tracks – however – when I want to publish a “Set” by HTML – the artwork defaults to my profile image.  
    Its really important to be able to have control over the artwork so that it fits conceptually and aesthetically with web site design.  

    This is not a complain – I am very impressed with Sound Cloud. 

    Another comment –  not being able to arrange the order of my work on sound cloud pages  (apart from spotlight) means that the order  of my music determined by the order that I upload. 
    This may not seem very important but I have several categories which I would like to be presented – i.e theatre, film, compositions (usually chamber music).  Being in control of the order would be very useful to me. Spotlight is good but my theatre music is very different from my chamber music and 5 tracks would not present a representative picture of what I do . 

  54. Matas Petrikas

    well, there are quite a few often requested features we have already implemented in the widget:
    – support for mobile devices
    – skipping in the tracks with a lot of comments
    – Flash-free audio
    – better sharing options

    as for the set download it will need to be added to the main site first. as for now we don’t have a clear plan for that, but that might change :)

  55. Matas Petrikas

    we are currently fixing it for the Android phones. Unfortunately, we might not be able to support all of them, as some older versions have no web audio capabilities at all. What phone and OS version are you running?

  56. Matas Petrikas

    hi Ben,

    your list is our todo-list :)

    Could you elaborate on the Safari and IE versions you have seen not loading the widget? We can’t reproduce that problem on our side.

  57. Matas Petrikas

    it should work! go to the user profile, click on ‘share’ next to the bug avatar picture, then on ‘customize player’ and you should see the HTML5 option there.

  58. Matas Petrikas

    how do you embed the private track? there should be no difference compared to the old one. But please note that you’ll have to enable the Apps sharing in your track settings! This is required for the new widget.

  59. Safe As Milk

    Hi – this is a great move – thanks

    a few bugs/issues

    I can’t seem to get it to work in IE7 on PC (running XP) at all. IE8 has no share/like icons below

    One of my clients says he can’t see the waveform in FF Mac – latest version (although seems to work for me)

    If i put the player in a pop up window it doesn’t load the wave in the new window on Chrome (Mac and PC)

    great work – thanks again

  60. Adi

    Love the HTML5 work guys, HIGH5s indeed!

    My feedback – I’ve embedded it on one of our product pages and it works fine in Google Chrome (15.0.874.106 m), but not in Firefox 8.

  61. Matas Petrikas

    we have considered that, but it’s almost unused on the current widget and we’d like to be able use the space for other features that are more popular. Are you adjusting the volume often? Is for a specific sound content?

  62. Adi

    Sorry to add some detail about the Firefox 8.0 issue – the player displays but when you click the play button it doesn’t do anything.

  63. Matas Petrikas

    we are fixing the IE8 support, it looks promising. Sadly, the IE7 users will be getting the old flash widget, we need to make a cut somewhere. I hope you understand! :)

  64. Dan

    Got it, works fine now except for other issues already mentioned in this megathread.  Might want to mention that requirement somewhere in the article above, or in the customize widget interface, since it’s a departure from how the other widgets work (apps sharing is not required for them to work).

  65. James hesford

    http://www.jameshesford.com/JAMES_composition.htm
    Here is a link – you will see HTML5 – no problem with that – artwork is what I uploaded 
    However the next player is just a normal “SET” with artwork because if I use HTML5 “SET” player the artwork I uploaded for this particular “SET” only shows up as little square at the bottom of the music list and the main artwork which should be in the big square at the top is my profile picture.
    Chears James 

  66. Ben

    I’ve tried the HTML5 players in the following browsers:

    PC (WinXP SP3) Internet Explorer 7.0.5730.13 – Doesn’t load at all, just a grey square.

    PC (Win XP SP3) Internet Explorer 8.0.6001 – Loads the old flash players instead of the HTML ones???

    PC (Win XP SP3) Firefox 8.0 – Looks fine, but a yellow bar is displayed saying “Additional plugins are required to display all the media on this page”. It still asks me to install the flash player.

    MAC (OSX 10.6.6) Firefox 3.6.23 – Players load, but waveform doesn’t appear.

    MAC (OSX 10.6.8) Firefox 7.0.1 – Works fine.

    MAC (OSX 10.6.8) Firefox 8.0 – Works fine.

    MAC (OSX 10.6.6) Safari 5.0.3 – Works fine.

    MAC (OSX 10.6.8) Safari Version 5.1.1 – Doesn’t load at all, just a gray square.

    MAC (OSX 10.6.8) Google Chrome 15.0.874.120 – Works Fine

    iPhone4S (iOS 5) – Works Fine

  67. Ben

    Hope the above can help.

    “Off the records” is there any sort of rough timeframe for the browser support fixes? As in 1 week or 6 months, which is closer?
    It would be great to know a ball park timeframe your aiming for as our new website thats about to launch is hanging on the decision to go html5 or not. Over 100 SC HTML5 players embedded into the site already.
    Contact me directly if you wish to view the test site. Would be willing to wait up to a month to launch the upgraded site if the player is looking ready. If not will have to consider using the old player without iOS working.

    Cheers
    Ben.

  68. Barry Suchet

    I don’t get it. These “HTML5” players don’t work for me in Firefox on either my desktop or my mobile phone. Given that Adobe has now abandoned Flash for mobile browsers I thought the player would at least work in Firefox on my phone.

  69. George

    Finally there’s a HTML5 player!

    1) I would love to have the player as simple as possible. Here’s an example: http://i.imgur.com/S0q8K.png Is there any way I can do this? (or similar)
    2) I have a music blog and there are always a lot of players on the same page. And it’s crashing the browser! I’ve already tested this on several computers – most of the browsers just freeze. Then I replaced the HTML5 players with Flash ones and everything’s back to normal.

  70. Auruz

    I really like it but it needs a volume control…please tell me this is a feature you will add eventually…this player it is beautiful and it loads so much faster than the flash one.

  71. Anonymous

    Hi,

    I think there are issues with using js animation and the player’s waveform. If the page fadeIn the iframe or the div around the iframe then the waveform doesn’t appears. And that’s on osx with latest chrome and firefox.

    It seems to be related to the player being display:none at the beginning of the animation and then turned to display:block.

    That’s only a problem for people who are using fancy effects but I’m guessing that if the player can render Artwork and buttons in those cases, it should be able to render the waveform.

    Thanks for the Html5 player, it looks great, well done.

  72. Drastic

    Exactly the same for me : not artwork in my sets. And yes, I know artwork has to be set to true. And yes I have a picture for the whole set.
    In fact the image doesn’t appear in the html editing window either, also at the bottom small size.

  73. Drastic

    Artwork doesn’t show up on a set but works fine on a single track. Strange. Is it a bug ?  Even more strange, in the player editor, on some sets I get the profile picture in place of the set artwork… Help please.

  74. Prestoncliffordwynn

    Two questions.

    1.  Does the widget switch to flash backup if it detects that the HTML5 will not work in a particular browser?

    2.  If I embed an HTML5 widget in my website and you update the player, is that something that happens on your end.  In other words will the widget I have embedded link to the new updated version, or do I have to embed the new update?

  75. Drastic

    I wonder if anybody’s reading these comments and try to help us. I’ve posted my question 3 times (1st time 5 days ago) and still have no answer.
    Here I go again : 
    Artwork doesn’t show up on a set but works fine on a single track. Strange. Is it a bug ?  Even more strange, in the player editor, on some sets I get the profile picture in place of the set artwork… 

  76. Matas Petrikas

    I’m sorry I have missed your question!
    pelase keep in mind that now the set artwork is displayed at the bottom of the set player (small thumbnail) the larger artwork on top is displaying either the track’s artwork or your avatar if the track has none.
    if you would like your set artwork to be shown on top, please update the artwork of the first track.

  77. Drastic

    Thanks a lot, I had missed that point. Either that was unclear or I was dumb :-)
    Now, while trying by myself to find a solution, I was in the process of updating every track with artwork ! Maybe that’s why it’s taking some time before it updates in the player ? Some update very fast and some others take long and just keep showing the avatar.
    Are you saying that the first track is enough to propagate to the whole set ? Thanks.

  78. Matas Petrikas

    1. if you disable the artwork and resize the iframe height to 55 or so pixels, it would pretty close to the idea. We will be introducing an HTML5 version of the mini player in 2012 too.
    2. this is very strange! we had similar problems with Flash widgets but one of the reasons why we have built the HTML5 player was to make sure we can handle tons of them on one page. Could you share a url of your blog? We would like to recreate your test. What browsers were crashing?

  79. Matas Petrikas

    We are still using Flash audio component on some browsers that don’t support the mpeg audio codec, but we hope we can switch more browsers to HTML5 audio in early 2012

  80. Auruz

    It seems like the default volume setting for the html5 player is MAX…so whenever you go to play a track it is really loud,so you have to adjust  the volume on the computer or device…when you go back to play anything else then the volume is too low,it is really inconvenient,having a dedicated volume control on the player it is a must,just like the flash one has it. 

  81. Kristen

    I am not the original poster, but I’m running a Motorola Droid Global 2 (just got it last April). It is using Android version 2.3.3 and it currently cannot view the player. I hope my phone is included in the ones you are planning to support?

  82. Prestonite

    Report on how Soundcloud widgets are performing within Android.
    My device is a Samsung Galaxy S2.  All browsers are latest updates.

    ANDROID – HTML5 – NO – blank – “oops. This sound can’t be played outside of             SoundCloud”,                – FLASH – YES – player appears after little green arrow clickDOLPHIN – HTML5 – NO – no waveform section               – FLASH – YESFIREFOX – HTML5 – NO – full widget – no function                – FLASH – NO – requests a plugin – does not specifyOPERA – HTML5 – YES             – FLASH – YESANDROID – HTML5 – NO – blank – “oops. This sound can’t be played outside of SounCloud”.                – FLASH – YES – after arrow clickDOLPHIN – HTML5 – NO – blank rectangle               – FLASH – YESFIREFOX – HTML5 – NO – full widget – no function               – FLASH – NO – requests a plugin – does not specifyOPERA – HTML5 – YES             – FLASH – YES

  83. Prestonite

    Report on how Soundcloud widgets are performing within Android.
    My device is a Samsung Galaxy S2.  All browsers are latest updates.
    Second attempt.  Last post I pasted.  This one I will enter physically.

    SETS:

    Android – HTML5 – No – blank – “oops. this sound can’t be played outside of soundcloud
                – FLASH – Yes – player appears after little green arrow click.
    Dolphin – HTML5 – No – no waveform section
                – FLASH – Yes
    Firefox – HTML5 – No – full widget – no function
              – FLASH – No – requests a plugin – does not specify
    Opera – HTML5 – Yes
              – FLASH – Yes

    SONGS:

    Android – HTML5 – No – blank – “oops.  this sound can’t be played outside of soundcloud
                – FLASH – Yes – player appears after little green arrow click
    Dolphin – HTML5 – No – blank rectangle
               – FLASH – Yes
    Firefox – HTML5 – No – full widget – no function
              – FLASH – No – requests a plugin – does not specify
    Opera – HTML5 – Yes
             – FLASH – Yes

    Hope this one is less jumbled.

  84. Anonymous

    Hi.

    I was at work friday afternoon with the latest firefox. Clean install, maybe adblock installed. The widget worked like at a charm. Then a few hours later, at home, same firefox, the widget wouldn’t load (it still doesn’t). I mean i see the widget but there is no waveform in the widget. At first i thought it was because of my extension, so i went into safe mode but it didn’t work better. I thought maybe it’s because i’m using ipv6, or maybe ’cause i’m in 64bits but on the same computer it works fine with the latest Opera.

    I’m clueless. Any idea?

  85. Anonymous

    It’s not very clear the way i forumlated it. I meant it’s the same firefox version at home and at work but 2 different computers.

  86. Eric Beam

    Pls Leave out the vol control. It’s great as is. Computers/devices already have that covered. I hate how the flash player defaults to less then 100%

  87. l0r3nz

    I would like to know if there are more options planed to get the perfect look for my blog (other themes, or a html5 miniplayer etc). I mean, with the old player, I added a custom bg-color so it looks clean and minimalistic. Now imho it’s just too much.

  88. Prestonite

    Thanks for posting your confirmation.  I actually placed a pre-music page on my website letting android visitors know what to expect.

  89. Ben

    works fine on my new site. I like how the sets have an easier to locate download button than the old players.

    PROBLEM, if a player has the download & buy functions enabled it does not show both.

  90. Silversix

    An error occurred while processing your request.Reference #50.56cb6bd1.1321957093.d149a58Is the error i get on “Shweeder’s” site…Works fine for me everywhere else though.

  91. shweeder

    Yeah It seems to be happening most of them time and occasionally it downloads. Thanks for all your help. I just really don’t want to have to use flash anymore haha. 

  92. Es3190

    Everything looks great. One issue though. My height is inconsistent from computer to mobile device. On my iPhone, it looks as if the height of the player for my sets are 50-100 pixels less than it should be (and scrolling doesn’t work), so the last several tracks are cut off.

    Any ideas?

  93. Anonymous

    Any given widget actually, including those on this page. I think it’s a local problem, but i can’t figure out what it is exactly.

  94. Guest13

    i’m seeing the html5 widget here as a white box. is there something wrong? i’m using FF8. same thing with my tumblr blog as well. all i’m seeing is white box. works just fine few days ago though.

  95. Matas Petrikas

    hi Ben, currently we are fighting problems on Android, but other browsers seem to be quite ok, at least on our testing systems. If you see any particular problems, please report with the page urls so we can check them!

  96. Avi Gallant

    Matas,

    I’m having issues on a Windows Machine using Firefox 3.6.24.  The player and waveform are not appearing.  Other data does appear.  Does not load players on this page either.  Other browsers working for me.

    Thanks

  97. Avi Gallant

    Just updated to Firefox 8.0 and still have same exact issues where waveform and plater do not display.  Other data does display.

  98. Avi Gallant

    Just updated to Firefox 8.0 and still have same exact issues where waveform and player do not display.  Other data does display.  This is on Windows

  99. Guest

    i’m on Windows 7, Firefox 8. standard and html5 players not showing. i don’t think it has anything to do with extensions. i’ve tried removing all of my extensions but the problem is still there. i’ve even tried re-installing firefox with zero extensions, it’s the same.

    however, things appear to be just fine on Internet Explorer and Google Chrome. tried tweaking around with flash settings as well but with no result.

  100. Ben

    another little bug is on iphone & ipad when the player is condensed in width, the soundcloud text in the logo on the bottom right of the player overlaps the favorites. Maybe have it so once a certain width the writing from the logo disappears and just leaves the icon.

  101. Ben

    Our new HTML5 website is looking unreal with the all new players. Just wanna give a big thanks to the people at SC for making them work.

    Thanks a lot SC, it really changed the design and how our site works.

    :-) xx

  102. Kristian

    When are the download buttons coming? I miss that feature from the old player on my website.
    Thanks!

  103. Anthony

    on internet explorer 8.0.6001.18702 on windows xp just seeing a white box, any suggestion on how to fix?

  104. Matas Petrikas

    is it the same on any page? are you embedding it somewhere or do you see the problem on this page too?
    do you get any errors, e.g. do you see an icon with an exclamation mark at the bottom of the browser window?

  105. Kristian

    Ah there it is! I was expecting to see it within the highlighted orange area of the track, which in my opinion makes more sense, since it connects it to the track. Perhaps if you prefer having it in its current position, that you could make the button or the borders orange, to increase visibility? Thanks for your response, Matas!

  106. Kristian

    One more thing I just thought of: It would be nice to be able to hide the comments on the songs. I don’t need them visible on my website.

  107. xactionx59

    Doesn’t work on Internet Explorer 8 & 9… Can you fix it please?

    Work well on iPhone/iPad, very cool!

  108. Matas Petrikas

    strange, it works well on both Internet Explorer versions on our test machines. Can you see the player? What about the playing?
    Do you see any error notifications at the bottom of the IE window?

  109. Matas Petrikas

    hi Auruz,

    we’ll need more info:
    what OS?
    what extensions do you have installed?
    Do you have cookies disabled?
    Do you have Flash installed?
    Is the playback broken or you can’t see the widget at all?

  110. Anthony

    hi matt,

    on this page: http://blog.soundcloud.com/2011/11/03/html5/
    in ie8 the html5 player shows as a blank grey box. here’s the error from ie8

    Webpage error detailsUser Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; IPH 1.1.21.4019)Timestamp: Thu, 1 Dec 2011 18:22:15 UTCMessage: Object doesn’t support this property or methodLine: 51Char: 11511Code: 0URI: http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F26406734&auto_play=false&show_artwork=trueMessage: ‘SC’ is undefinedLine: 54Char: 7Code: 0URI: http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F26406734&auto_play=false&show_artwork=trueMessage: Object doesn’t support this property or methodLine: 51Char: 11511Code: 0URI: http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1187266&auto_play=false&show_artwork=true&color=2b877fMessage: ‘SC’ is undefinedLine: 54Char: 7Code: 0URI: http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1187266&auto_play=false&show_artwork=true&color=2b877f

  111. Kristian

    Worked, thanks! Lastly (I hope, heh) – a question of lesser urgency: When will these players appear on SoundCloud itself? It would be really nice to have the artwork shown in the sets on my profile.

  112. IH

    Is there a way to make it more streamlined looking?  Using the flash player on my site I get 14 tracks listed without scrolling.  Changing to the html5 player in the same size box, only 4 tracks are visible.  Way too much space devoted to the waveform and the name at the bottom.  Would love to see a tracks and play button only version, no waveform (or small) and no big name at the bottom.  www.ianhoneyman.com

  113. Kristian

    Sorry, one more suggestion, now that I have removed comments: It would be nice to be able to seek through a track on the bottom half of the waveform. Thanks!

  114. Sounds and Colours

    Hi MightyMess,
    I just tried using your Soundcloud is Gold plugin but my Soundcloud files were showing as “Track is not available.” I previously used the Soundcloud Shortcode plugin so have just been using the shorthand code. But, I wanted to integrate the new HTML5 player so was hoping your plugin would do the trick. Are they showing “Track is not available” as they are not tracks that I have favourited or something like that?
    Best,
    Russ

  115. yannis

    it doesnt play in my site… it says “Oops! This sound can’t be played outside of SoundCloud.Check out this sound’s page on SoundCloud.”

    why’s that?

  116. yannis

    Hello, yes it is enabled. The strange is that when i choose the htm5  in the tab (to share the file), it says the same msg…

  117. Filligar

    It would be great to have the option to link each track to a video or to have the info/lyrics pop up, and even have the option for that video to open using a specific rel=”” tag such as “shadowbox”. we’re trying to incorporate those features into http://www.filligar.com.

  118. Avi

    The HTLM5 widget does not properly update with # of plays, favorites, comments, etc.  

    It should update but does not.

    Avi

  119. Matas Petrikas

    as the widget is heavily optimized for load performance, we have to trade some things in return. We are caching heavily on the user side, meaning that when you refresh the page you might still see the older stats. But other users who have just loaded your track should see the very latest state of it.

  120. GMM

    Hi guys, this H5 widget is superb, great work, I love you!

    Question about automating the embedding: The previous Flash widget, I could automate the embed with dynamically inserting the “permalink” id of the song to the embed code, i.e. “my-track-name-here”. I’ve got all those stored in my own backend database. 

    This new widget uses a new numerical ID to identify the track it seems. So I can’t just change the embed code to the new iframe. Is there a way to ID tracks (or albums) by their old “permalink” name in the HTML 5 widget?

    I’ve got like maybe 3-400 tracks and albums already stored with their song id name… I don’t have your numerical ID and don’t know how to find it except via the rather long Sharing pop-up route. 

    (Examples: http://www.ugress.com/albums.asp

  121. Matas Petrikas

    hi GMM,

    we’ll see what we can do. the fact that the old widget still supported the normal urls was rather a legacy thing and we would like not to be moving that to the new one as well.
    A quicker way of getting the api url is to extract it from the embed codes in the old widget. If you click on the sharing icon on the right side of the flash widget you should see it. Take e.g. the url http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F10793 and replace the url param in the new widget.

  122. GMM

    Thanks Matas for quick and pretty understandable answer. That was a very polite “no” :)

    Is there a quicker way/trick/route for me to get these numerical ids for all my tracks at once? Doing it manually for 400 tracks is not my prioritized wish for christmas ;)

  123. Thomas von Deyen

    Any chance that we get the HTML5 Player everywhere on soundcloud, not only in the widget? I disabled Flash. And I won’t enable it again.

  124. Matas Petrikas

    as long as you are using a WebKit browser you could enable HTML5 on the main site here: http://soundcloud.com/settings/extra
    We’ll roll in other modern browsers later in 2012 too.

  125. Jeremy

    Could you add an option to set the background as transparent ?
    It would be really helpful for a better integration !

    Thanks in advance !

  126. Matas Petrikas

    Which tracks have no download button? Please keep in mind that for now, if you have both ‘buy’ and ‘download’ we’ll show only ‘buy’.
    As for artwork widget, it should be coming in Q1 2012.

  127. TommyTankTop

    Is there anyway to disable the share button on a private set embedded on our site? We used to use share=false&amp but it doesn’t seem to work on this new version?

  128. myluckyfish

    I’m having the same problem with both my site and my iphone. “Oops! This sound can’t be played outside of SoundCloud.”

  129. officerfishdumplings

    I uploaded 11 tracks into a set, and then renamed the tracks individually after the whole set was uploaded to my soundcloud account.  but, for some reason the HTML5 music player still shows the original track names.  the other music players don’t.  see here: http://thisbeatisyourbeat.com/?p=35

    any advice on how to fix this?

    Thx!

  130. Chaz Ed

    It seems that my inability to only access SC occasionally is spotty at best! It doesn’t seem to be on my end! If you have so many subscribers that your site slows to a crawl, you need more bandwidth on your servers! It’s too bad because I like your site but it is unusable for me!

  131. Defusionrecords

    yes..the flash version looks muuuchh better than the html5…and transparent would help a lot

  132. Defusionrecords

    thx for making a html5 version…but it still looks not really as cool, as the flash version…but so many people in the creative scene using ipads and iphones…i want to make my own homepage/wordpress site as cool as possible…please give us more possibilty to customize this fab player

  133. Matas Petrikas

    hi,

    if you are looking for a more special look you might try our custom player, which can be styled in any possible way: https://github.com/soundcloud/soundcloud-custom-player/wiki/

  134. rod

    the players are insterted as separate joomla articles, if you look at any page, except the entrance page, you will see thin grey lines at the bottom – which before separated each article, and the footer menu has grown or is distorted. also the facebook like button has dissapeared from each article, and is only seen when you open each player in its article page (click the dj title. i made no changes, except to take out the old soundcloud player and put in the new one, as i did not know was beta – as there was NO warning when choosing the player. http://www.morbomusic.com/en/room-3.html  

  135. Matas Petrikas

    on my Chrome it looks like that: https://skitch.com/matas.p/gthiy/tom-stephan-radio-chumbo-london which seems to be quite ok. On what browser specifically can you see the problem? Also please keep in mind that new players use the iframe tag instead of the object/embed tags. The CSS file on your site might have certain assumptions for these tags too.

  136. Zach Taylor

    It’s working now…didn’t change a thing. Only issue I see now is that the frame height needs to be about 70 pix higher than browser in order to show all the songs on iPhone. i.e. Safari height 500 fits all songs, iPhone height 570 fits all songs.

  137. Schreng

    hi, is there a way to hide the link/ photo to me in the set mode? So that the widget ends with the last track? best regards

  138. Ask Ofd

    thanks matas – it is indeed fixed now.  but i’m not so sure the issue was on my local browser cache – i had tried clearing it / resetting Safari, and trying it brand new browsers – i checked again the next couple of days.  So perhaps there’s some server-side caching that occurs with the html5 player – might be worth looking into setting a lower TTL if that’s the case.

  139. Anonymous

    Ta da, where’d it go? Is it just me that can’t see ANY html 5 widgets anymore? Not on my site, not on soundcloud and not in this blog post. Is it just me?

  140. There there Dear.

    So, just because you’re jumping the gun and ‘on principal’ have decided that flash isn’t for you anymore, you want SC to change EVERYTHING on their site despite the fact that there are others, myself included, who like the flash player, aren’t self obsessed and see that there are, and probably will be for a while, issues with the H5 player.

    That’s nice of you dear. Bet you don’t like other kids sticking their hands in your toy box either.

  141. TheRadius

    Thanks for your hard work on upgrading SoundCloud to HTML5 land. One quick question…

    Is there a way to “hide” or “disable” the username and trackname?

  142. TheRadius

    I was able to hide the user name with “show_user=false”. Is there a way to hide the Track title too? Can’t seem to find it on the SoundCloud Player Widget Doc.

  143. Abbo

    Hi, I edited one of my sets, by removing some tracks and re setting the track order, but when I go to share it on my website to update that too, it remains in the pre edited format with the removed tracks still on and in the original order. this seems only exclusive to the html5 option when I click share. Can anyone help with this?

  144. Matas Petrikas

    hi,

    if you reset the cache in your browser you should see the updated version. currently we are caching the data quite aggressively, so it might take a while till you can see the changes yourself. The users who are seeing your set for the first time will get the very latest version.

  145. Abbo

    Wow, Thanks for such a speedy reply, and Thanks for what you are doing here on soundcloud. I admit I use it for more of a storage station for my songs online at the moment, but am rectifying that as I build my website and use your amazing services in conjunction with it. 

    Take good care, abbo

  146. Marcin Widera

    Hi, I heve the same problem with Mozilla Aurora – here: http://www.wroclaw24.org (on the table “Wybrane modlitwy”)

  147. Anonymous

    Very cool
    but it does’nt work if we have no flash on our browser… Is there a new version coming soon ?

  148. Ekedapale-737

    Hello, there is a possible bug in the set player:

    – existing set, as html5- add new track to this set- html5 player doesn’t include the new track while standard player do

  149. Matas Petrikas

    hi,

    the widget is highly cached, if you reset your browser cache you  will see the very latest version, everybody else will get the latest version once they load your set.

  150. Anonymous

    I report for a person who had Firefox with Mac osx. When I try with Windows on Firefox without flash it doesn’t work too.

  151. Debiwithers

    hi there – trying to change the widgets on wordpress.com and it doesn’t recognise the code it seems…any advice? I’ve followed all the steps as far as I can tell.

  152. Mike

    I’m a little late to the party, but I just discovered the HTML5 widget. Working great for me so far. 

    I know this has been mentioned a couple times already, but I too would really appreciate an option to change the background color like you can in the Flash widget. The ability to change the waveform color would be a nice bonus too, but I don’t want to push my luck.

    Overall, great job on the widget. This will save me a ton of time trying to code my own!

  153. CAC

    the iframe player wont appear on FF, it leaves a grey rectangle with nothing in it….any suggestions, i dont want to have to use the old player due to ff not supporting..or is it my version 9.01

  154. Mkkyah

    Hi,
    I visited blog.soundcloud.com to check if my mobile (n900) is working with html5 widget. Some of the players on the first page loading normal and playing, some of them appear with “This sound is currently not available” error. Any clues?

  155. Mkkyah

    Hi Matas,
    It’s not always on same tracks.I suspect yesterday it was loading faster. Now it seems to me like it takes very long like the page stucks loading the last 1/5th. Then some of them come with error, always different amount, mixed order.

  156. Anonymous

    HI there, great work.. I suggested this a while ago :D

    Though I have the following suggestions:
    – Make an option to let it look the same like the flash player.
    – The waveform is vertically assymmetric, looking like DC offset
    – Make it work faster :) flash is still faster atm.

  157. Joe

    Is there any way of getting the standard widget in html5?
    Also any way to get the html5 widget to display as many tracks as the old one could in the same space? Looks good but kinda oversized for some uses

  158. thetruejoe90

    Hiya guys.

    Patiently waited til mid January to test this on my site.

    http://thetruejoe90.com/danceelectronica/massacre-vertigo-ep-by-davip-engage-conectivers-and-encode-review/ 

    I’ve implemented the code using the normal embed option, no plugin, just straight from the ‘Share’ button and implemented a small piece of custom code to alter the functions and what’s displayed on the player and voila!

    I’ve tested it on the big, boy browsers and the iPad too and found no errors at this current time.

    This is the only post so far but I figured that the feedback may be appreciated.

  159. Matas Petrikas

    I’m sorry but the flash player UI design was quite old, we won’t be coming to it I’m afraid.
    When you say flash is faster, what exactly do you mean? Loading? Interaction? Based on our research we can see that the new widget is 2-3 times faster in most of aspects. I was wondering what would make you perceive it slower?

  160. Matas Petrikas

    The design of the HTML5 widget is the next step in SoundCloud player UI, I’m afraid we won’t be coming back to the one you see in the flash widget. It was more than 3 years old!
    What are the use cases where you would like to see more tracks in the playlist?

  161. Mike

    Hey Matt, Is there anyway we can change the background of the player? or make it transparent? This would make everyone site alot better. Also the download button on each track?

  162. ih

    I agree it seems oversized.  On my website http://www.ianhoneyman.com with the flash version you see 14 tracks in the playlist.  With the html5 version (visible if you go to the site on an ipad) you only see 5 tracks while it takes up the same amount of room in pixels.  I wish I could get rid of the huge title bar at the top and the user bar at the bottom, that would help a lot. 

  163. Joe

    Precisely. I have it as a player at the top of joecm.tumblr.com but I don’t want it to take up too much space so users can see some posts without having to scroll down. If you look at the website you’ll see it’s very vertical. It fits 7 songs in, the html5 fits 2.I want the user to see I have many/more tracks to play but don’t want it taking up too much space.An option to remove track artwork from the playlist would drastically increase the amount of tracks seen and the artwork can be seen when the track is played anyway. Possible future development if I might be so bold? ;)

  164. Nicole Renee

    I would love to see a pop-up option link for the player…so on a music site they could keep the player going off to the side.

  165. Prolatoshi

    When I paste it on facebook it doesn’t show the picture and the tracklist. why? I have firefox and safari.

  166. Julian Bowman

    I agree too. It’s the reason we are sticking with the flash player at the moment. As is, the real estate used for the wave and album art is huge and clicking to not use the album retains the same height for the wave player. Really, who cares?

    If the album art is not selected the top section should reduce to at least a third of the height. Also there should simply be an option to not include the whole bottom bar. Completely wasted pixels.

    Finally, it needs to have the choice for colours of clear backgrounds.

    Don’t get me wrong I am impressed you’ve made an html5 player whilst retaining security for the mp3s. In fact very much so. But the design side of the player is kind of…. poor, really. It hasn’t taken into consideration use of the player or the fact that people mostly want sleek elegant looking players so blend in to their sites rather than large clunky ones with wasted pixels.

    The only TRULY important part of a player, EVER, is the ability to see the song titles and click on the one you want to hear the music. That, i’m afraid, is the be all and end all.

    ps: I have, and will, keep checking back for the html5 mini-player. That is by far our favourite flash player and when that is released, then yes, we will replace all the flash versions with html5.

    Cheers and good luck moving forward with it.

  167. Anonymous

    Ah, new designs are always better? I can understand there might be some pressure to renew stuff continuously but please also consider ‘never mess with a winning formula’ : the current one has the perfect dimensions and a very nice layout.

    Mainly responsiveness to the mouse, but that was last month, i’ll try again and see if it is still the case.

  168. Richard Nash

     DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME! DARK THEME!…….. please.

  169. Daniel Finney

    Great work, looks so much neater! Is there any way to remove the author and title from the bottom of a set when embedded? I’m looking to use the player on a landing page for my band and would like to make it as simple as possible. Thanks!

  170. duncan

    i’m having a problem.  i added a track to a set which is embedded in to my website via the html5 widget.  the track will not show up in the player for the life of me.   even when i click ‘share’ and try to export new code for the widget, the song isn’t even in the preview.   why is this?   all other tracks i’ve added to the set simply appeared with a refresh of the player on the webpage.