Matas HTML5 Widget – Ready For Prime Time

Almost 3 months ago we announced our new HTML5 widget player. Since then we have spent a lot of time gathering your feedback, testing, bug fixing, talking to the browser vendors and improving the user interface. We were glad to hear about your experiences using the widget, we have seen an incredible uptake in sharing of the sounds played in the new widgets. With the mobile browser support we were finally able to fullfil one the main feature requests.

From the very beginning of this project we were convinced that we should bring as much of the SoundCloud experience to our widgets as possible, features that go beyond just listening to the sounds.

Today we are adding two major new features to our HTML5 widgets – Comments and Likes. This means that from now on you’re able to comment on sounds embedded anywhere on the web and you can save them as a favorite on SoundCloud too.

Also, we are proud to announce that today we are officially switching our default widget to be the HTML5 widget. We also know that our major partners plan to support it in the near future. Of course the old Flash widget will be still available if you need it as an alternative option.

  • http://twitter.com/Err0r_500 Err0r_500

    Nice! Will the “mini” player will have its html5 version too?
    PS : sorry to post a Feature Request directly, I use it since it’s out on my own website and it works like a charm so congrats men!

  • Evangir

    What about downloads to device’s music library directly?

  • John P Fraser

    Just started using the HTML5 Widgets on my website, they work like a dream across all browsers and on the iphone too…. Fantastic….

    Thanks Soundcloud, keep up the good work….

  • http://www.facebook.com/dsmith1205 Donald Smith

    Does the new HTML 5 widget have a volume control?

  • http://twitter.com/Err0r_500 Err0r_500

    If there’s one, it’s well hidden… I was looking for it myself…

  • Eric

    Nice! Do they run well on WordPress?

  • http://twitter.com/matas_petrikas Matas Petrikas

    The mini and artwork versions are on our roadmap, but there are a few things we’ll need to sort out first. I hope you can wait a bit :)

  • http://twitter.com/matas_petrikas Matas Petrikas

    Sadly, that is controlled by the mobile device vendors – please ask Apple or Google to fix that!

  • http://twitter.com/matas_petrikas Matas Petrikas

    we have decided not to include the volume control so the user interface is less cluttered with features. but if many of you will ask for it, we’ll might reconsider :)

  • http://twitter.com/Err0r_500 Err0r_500

    Sure! It’s just that I’ld like to have an absolutely flash-free website but anyway I think that most of the visitors haven’t totally disabled it yet.

  • experimedia

    Fantastic news!  After the mini html5 is available we will be able to eliminate the last bit of flash on our shop’s site.  Will be a ton of work replacing all the old album preview embeds but well worth it. Much anticipated.

  • http://www.kud.fr Erwann MEST

    HTML5 for the win.

  • http://www.facebook.com/jantelis Jake Antelis

    to start i love Soundcloud and have been a big fan for few years of the old setup…Some constructive feedback:I like the Html5 update as it runs amazing! and the fact that it shows up on my iphone.. however a volume control is a must, especially for someone like me who is using Soundcloud and paying for an account to use on my recording studio website. What if someone is browsing and wants to lower the volume on the widget and not have to mess with their system volume..Also the waveform now looks like a 1995 protools waveform..looks blocky and not as defined as the flash version. I wish the widget text size were editable as well as having the option to NOT have your user name on top of the widget. I’m not an artist and i just wish to have it plain without my user name on top of the widget. It’s on botton already which is fine. I have 36 songs on my studio reel set that i feature on my website right now the spacing in the html5 is a bit too much for my taste wish there was an option to change that. I would also like the option to disable comments on my widget as i think it looks messy on my website like that but i like it if someone is directly on the Sound cloud website…i just don’t want it on my studio website. I think the reason soundcloud is so successful is partially due to offering the waveform and the timed comments . I too believe in keep it simple stupid ( KISS ) however not having a volume button on a music player is just crazy to me. I really hope some of these things are addressed in the new version. If they aren’t i will just use my own ( not as good looking ) music player that i can just host on my server.

    **EDIT i was searching for info on how to change some of the things i requested and found a few hiddeon on the soundcloud website, not very upfront as html 5 code, which i really don’t know to much about how to get it into my player properly, i copy and pasted a few of the codes but i’m not expert on that. I wish these options were included when one goes to make the widget directly on the soundcloud player.

  • http://twitter.com/Err0r_500 Err0r_500

    I understand, no problem. You know how it is, when something is great, you always wonder if it could be even better. It could be an option or something like that, that you could enable when you customize the player.

  • http://twitter.com/matas_petrikas Matas Petrikas

    yes, if you update to the latest plugin version: http://wordpress.org/extend/plugins/soundcloud-shortcode/

    we are also expecting that wordpress.com will update their integration in a few weeks.

  • http://www.facebook.com/profile.php?id=771795572 Esa Edvik

    That is just SO fucked up. Sorry about the language, but its current position is just in an insane place. Every proper GUI has a volume control where every other control is located. Please, please include one, however small, but put it there.

  • http://www.facebook.com/jantelis Jake Antelis

    I agree. To be Honest the flash version was setup cleaner and better TO ME. html5 runs better though. wish they would add in a volume control…that seems so crazy not to have ” as a music player”  music is about dynamics, soft, medium, loud etc etc. Very annoying for me as a paid account and someone who uses the player for my recording studio production reel. 

  • http://ultrabooks-test.de/ ludwig coenen

    yeah, that would be a dream!

  • selftitledmag

    Um, the players don’t appear to be displaying properly in Firefox now.

  • Pingback: Soundcloud vs Mixcloud, uppdatering | Henrik Löwenhamn

  • http://twitter.com/a_kovalev Alexander Kovalev

    what exactly is not displayed properly? can you please provide us with a screenshot?

  • Brian

    Excellent!! excited about this. Brian | http://www.fireflie.com

  • http://www.twitter.com/dayshabass Daysha

    (comment deleted)

  • Kuru

    Love the option of having the HTML5 player embed, but what would be really cool is if the mini, standard and artwork widgets were also HTML5-friendly. We use them all for the variety on our site, breaking up the monotony of sizing and placement.

    http://curedbykuru.com

    Is this a plan in the future?

  • Vytautas

    There is one little but visually non-pleasant thing :)
    Using Google Chrome: 17.0.963.44 beta-m

    Once user hovers on album art – if cursor is moved during the flip animation inside the album art/artist’s profile art box, animation stops. User needs to keep cursor at the same position for flip animation to continue :/

  • http://twitter.com/BarclayBunch David

    Widgets look great, I’ve just replaced the widgets on my website, they look great.  Still a bit of tweaking to do, they work on my iphone a treat :)

  • Lani D

    Seems like HTML5 is not really fantastic for Android: instead of a player it shows a overwhelmingly beautiful white rectangle. Mobile app developer (one of the biggest here in US) said that’s because HTML5 has plenty of issues as of now and it’d be smart not to use it for mobile widgets until all those issues are resolved which will take at least few months from now.

    Is there a way to make it work? I’d be happy to use your HTML5 player on my mobile website IF IT WORKED, you know.

    Also, what about iPhones users? Are they gonna be able to open/play it on their iOS?

    Thank you.

  • http://minnesotasoundscapes.com/ Curt Olson

    Excellent! The HTML5 player is a huge improvement over Flash. Anxiously awaiting a mini version.

  • Nick Epp

    I think that a cue player like the one found on Beatport would be a good way to listen to tracks. You would be able to browse people and tracks without ever having to stop playing the sounds. I guess that makes the SoundCloud widgets obsolete though…

  • http://kpsnyder.com Kyle P. Snyder

    Is there a way to get in touch? All my HTML5 players from the beta are behaving this way, too

  • http://tricil.net John Jacobus

    Stratus will do this

  • http://tricil.net John Jacobus

    Where is the github on how to change the background color on this thing? ;)

    That white background is killing me on my site – the only advantage of the old flash one was that.

  • http://www.soundcloud.com/wayfu www.soundcloud.com/wayfu

    No volume control = no use :(

  • Erik

    Hi guys, 

    Really like the widget! Is there no way to add anti-aliasing in HTML5 to the waveform? It looks very “edgy” compared to the old widget..

    /e

  • http://twitter.com/ClickOpen ClickOpen

    Unfortunately it’s not showing the HTML5 player on Firefox 9.0.1 in Ubuntu Linux, just a big grey rectangle. Works ok in Google Chrome on the same machine. No javascript errors in the Firefox console, so I’m not sure what’s up.

    EDIT: Just tried enabling Flash, as I had it disabled, and the player appears now.. I guess this is related to Firefox not having MP3 support, so you need the Flash player to play the audio. So it’s not really truly HTML5 in this case, and might cause some probs when people have Flash disabled / not installed.

  • Grace

     HELLO

    my name is miss grace, I would like us to be friends I don’t know how you will feel about it, please you can write to me through my email (grace_0enine@yahoo.com) I am sorry if i am embarrassing you, I don’t mean to do that. thank you for your understanding.

  • Grace

    HELLO

    my name is miss grace, I would like us to be friends I don’t know how you will feel about it, please you can write to me through my email (grace_0enine@yahoo.com) I am sorry if i am embarrassing you, I don’t mean to do that. thank you for your understanding.
     

  • Grace

    HELLO

    my name is miss grace, I would like us to be friends I don’t know how you will feel about it, please you can write to me through my email (grace_0enine@yahoo.com) I am sorry if i am embarrassing you, I don’t mean to do that. thank you for your understanding.
     

  • Grace

     HELLO

    my name is miss grace, I would like us to be friends I don’t know how you will feel about it, please you can write to me through my email (grace_0enine@yahoo.com) I am sorry if i am embarrassing you, I don’t mean to do that. thank you for your understanding.

  • Grace

     HELLO

    my name is miss grace, I would like us to be friends I don’t know how you will feel about it, please you can write to me through my email (grace_0enine@yahoo.com) I am sorry if i am embarrassing you, I don’t mean to do that. thank you for your understanding.

  • Grace

    HELLO

    my name is miss grace, I would like us to be friends I don’t know how you will feel about it, please you can write to me through my email (grace_0enine@yahoo.com) I am sorry if i am embarrassing you, I don’t mean to do that. thank you for your understanding.
     

  • Grace

    HELLO

    my name is miss grace, I would like us to be friends I don’t know how you will feel about it, please you can write to me through my email (grace_0enine@yahoo.com) I am sorry if i am embarrassing you, I don’t mean to do that. thank you for your understanding.
     

  • experimedia

    Any additional parameter options?  I found “liking” to kill the like button.  Cant seem to kill the track count on individual tracks in sets, the ‘buy all’ button in sets, or the username on the bottom of sets.  Top username yes but not the bottom one.

  • http://twitter.com/MusicByJames James Gilbert

    The HTML5 widget is nice. Is there any way I can have it play a random track from any of the tracks I have uploaded to my soundcloud account?

  • gerard devine

    I’ve being using it since the start of the year but its no longer working for me in firefox 9.01. No problems in chrome or opera 11.50

  • http://twitter.com/Selecta_Osci Selecta Osci

    FIREFOX FIX??? WHEN????

    its a shame that the widget isnt workin on one of the most used browser today. a total fail.
    dont make so much promotion, make better products… some of us are paying for you!

    FIX THAT – I DONT WANT TO SWITCH MY BROWSER!!!!

  • http://twitter.com/Selecta_Osci Selecta Osci

    i cant understand why it was working until yesterday?!
    where u just announced u switch to html 5 as default…
    and now it isnt working….

    WHAT A FUCKIN FAIL….

  • Subfader Subfader

    Great. But how does it play the mp3 stream file in Firefox?

    Btw: Zippyshare uses a shameless copy of the old SC flash player but with the nice option to switch qualities.

    How about streaming ogg or m4a files instead of 128 kbps mp3?

  • http://minnesotasoundscapes.com/getaway.html Curt Olson

    It’s working fine here in Firefox 9.0.1 (Mac).

  • Nick Fisher

    In browsers which don’t support HTML5 mp3 audio (such as Firefox and IE8), a Flash movie is used just to play the audio.

  • Nick Fisher

    Would you be able to give us some description of the problems you’re seeing? Also, which browser or device are you using?

  • Subfader Subfader

    When I right-click on it in Firefox I don’t see the flash player info which appears on normal flash players, thus it must be HTML5

  • gerard devine

    Turns out that clearing my browsers cache sorted everything out. FF9.01

  • Anonymous

    Does the HTML5 player support the privacy settings like hidden stats in the Solo and Pro packages?

  • ano

    great work on the html5 players, juut one thing: the html5 widgets (ifram) do not show up on 16.0.912.77 (Developer Build 118311 Linux) Ubuntu 11.10, there is just a grey area. console shows: application.js:3

    Uncaught TypeError: Object false has no method ‘onChange’

  • http://www.suboculis.com Soundtweaker

    Not playable at all with Windows Phone 7.5   Was it ever tested with it?

  • Guest

    Doesn’t work in Firefox 12.0, I get a nice blank part where it should
    be. Way to call it HTML5 when it doesn’t even work.  Not having Ogg
    Vorbis streams by default is truly retarded. Are you guys even trying?
    Don’t call it HTML5 if you can’t even do it right the first time.

    http://nightly.mozilla.org/

  • Jeff Tovar

    Having an odd issue happening with the HTML5 player, but it’s only on one computer, with Google Chrome and only to a couple sites of my own. The player shows blank rectangles, but what is odd, is I see the above HTML5 players for this post. I noticed that when the player isn’t showing, the javascript console shows an error:

    w.soundcloud.com:3 Uncaught TypeError: Object false has no method ‘onChange’

    This happened once in the past and it suddenly fixed itself; I’m unsure how.

    I’ve restarted my machine, cleared my cache, not sure how to get this issue resolved on my end.

  • Lani D

    I’ve copied/pasted your HTML5 player code on my mobile website. In Android, instead of a player it shows white rectangle. Player only appears/works after I keep clicking all over this white rectangle. Would you care to explain what’s wrong and how to fix it?

  • Pro Plus user

    Is there any way to disable the “Like” button? I’m really hoping to get rid of it. Thanks. 

  • http://twitter.com/matas_petrikas Matas Petrikas

    hi Lani,

    the players work on iOS, also on most of current Android phones. Do you know what OS version your Android phones has? We’d like to explore this issue!

  • http://twitter.com/matas_petrikas Matas Petrikas

    you can use the liking=false option to hide the ‘Like’ button

  • http://twitter.com/matas_petrikas Matas Petrikas

    Thank you for reporting! We are fixing this issue right now!

  • http://twitter.com/matas_petrikas Matas Petrikas

    thanks for reporting! we are fixing the ‘show_playcount’  and ‘buying’ options now!

  • http://twitter.com/matas_petrikas Matas Petrikas

    There’s a hidden Flash component that does the audio streaming in the browsers that have no mp3 audio support. We hope we can add native HTML5 ogg streams in the upcoming months.

  • Pro Plus user

    Thanks, Matas! It worked.
    By the way… I might be missing something on my end, but the HTML 5 widget only works for me (on Safari, Firefox and Chrome) when I don’t preface my URL with “www” (e.g. http://URL = success)… However the HTML5 widgets do NOT seem to be loading when I preface the same URL with “www” (e.g. http://www.URL = blank widgets) Conversely, the Flash version widgets DO work/load for me with or without inserting “www” in front of the URL. Not sure if this is related to your end or mine but thought I would mention it in case you had any ideas. Thanks again.

  • Subfader Subfader

    Yeah go for ogg! Sounds much better at 128 kbps :)

    An option to switch from default ogg to mp3 may be nice.

    Advanced users could also have a HQ stream added.

  • Subfader Subfader

    theme_color= has no effect

  • Subfader Subfader

    font= has no effect

  • Rachel

    is the firefox issue being worked on? I am using Firefox 10.0. Even the examples of the HTML5 widget on this page are only showing as a big grey box, so I know it’s the browser not a server issue with my site.  Thanks!!!

  • Rachel

     actually I can now see the players on this page, but still not working on my site…

  • Pro Plus user

    Just figured it out… the issue was on my end, not yours. Cheers!

  • http://twitter.com/matas_petrikas Matas Petrikas

    hi Lani!
    what Android device and OS version do you have? 
    We will try to find a similar setup and we’ll debug it.

  • Jeff Tovar

    Visiting other sites, noticing the same issue happening – big grey rectangles of doom using Chrome. I don’t understand why I can see the above widgets on this page, though.

  • Lani D

    Thank you for responding Matas. It’s Android 2.2.1 on HTC Inspire 4G cell phone. What I’m concerned about is the ability of your HTML5 players to show and function properly on most popular mobile platforms. I’m a musician and I’d like to use your player loaded with my songs on my mobile website and I only want to make sure people who use Android and iOS will be able to see and stream my songs without any glitches on their mobile phones. Is there something I can do about it (I’d be happy to if you just told me what exactly) or would you guys  address the issue on your own? I’d greatly appreciate if you helped me out with that. Thank you.

  • Ethan

     can you share where you found the info? I’m facing exactly the same problem and have been searching for the solution for quite some time…

  • peter

    dj peter mix inetntalo remix music dj peter.

  • Stereo Up

    does this work on WordPress?

  • Dojo

    for people having trouble in Firefox: I just had to clear my entire cache in order to get the players working again. hope this helps. (fyi I used CCleaner which also cleans session, history etc)

  • Dojo

     try clearing your cache and session

  • http://www.facebook.com/people/Richard-Nash/521357161 Richard Nash

    Does the player support downloading? Can I use the new player in Facebook? Those would be awesome things. I would also like the ability to allow people to download a whole set with one click. AND MAKE A DARK VERSION TOOOOOOO!!!!!!! You did it with the iPad version….

  • http://www.facebook.com/people/Richard-Nash/521357161 Richard Nash

    Also a mobile version that has larger buttons and text and a generally better mobile layout, like your iPhone app… This would be awesome, if you truly want the best player on the net…

  • http://www.facebook.com/people/Richard-Nash/521357161 Richard Nash

    YES YES YES YES YES YES YES YES YES YES VOLUME CONTROL!!!!!!!!!!

    Please… :-)

    Thank you.

    In all seriousness, a volume control is a necessity, or at least the option to have one. Very easy to blow out speakers when you plug your phone into a speaker without a volume control. I know there is a physical volume control on the side of most phones, but people have been taught to change volume using a control on the screen. Even Apple computers, as minimal as they are, still have volume controls, albeit physical ones. It’s one of those vital controls that needs to be available and immediate. Minimalism at the sake of function when the function is so important is taking minimalism too far, imho.

  • Lanidunefee

     To ppl thinking about using HTML5 widgets on mobile websites: DON’T! I’ve
    wasted enough of my valuable time to make sure HTML5 is nothing but a
    malfunctioning piece of annoyance when it’s installed on a mobile
    website. Not just Play/Stop button fails to stop no matter how many
    times you try but it disables the whole phone – I could not even turn
    the power off, not speaking about turning down media volume or opening a menu.
    I’m not an expert on this but it seems like when HTML5 widget starts to
    play it creates a major system error inside OS that only disappears if you find a way to stop it. BAD SHIT.

  • Kevin Roentgen

    As of very recently HTML5 widget doesn’t show the “album cover” artwork (upper left next to pause/play button) for a set, instead shows my default image? Does show album art at bottom of player. Why? Was better before!

  • Subfader Subfader

    Too many HTML 5 players on a page slow down most browser! :(

    A sample page with 10 random HTML 5 players: http://pastehtml.com/view/bnse1swth.html

    You can also experience it browsing your own blog: http://blog.soundcloud.com/2012/01/ (altho I couldn’t find a page with 10 players on a page…)

    Loading this slows down Firefox (10.1 here) for 5-20 seconds.

    CPU and RAM usage go crazy for Firefox.exe

    The same in Chrome 16.09 and IE 9 (who cares). Opera 11.61 seems fine tho.

    I guess it’s not SoundCloud’s fault, but nontheless this is inacceptable for the user experience! I go back to the evil Flash player on pages with many players.

    Maybe that’s why SoundCloud doesn’t use the HTML 5 plkayer itself on SoundCloud.com? (user pages, groupos and the dashboard use multiple players ona  page…)

    Windows 7 here, but that shouldn’t matter.

  • http://www.facebook.com/kennethkouot Kenneth Kouot

    This is beautiful.

  • http://profile.yahoo.com/26OQYIUZDDHNDRF2OIYUZSLRQA Subfader

    Too many HTML5 players on a single page make knock out browsers for 5-20 seconds on page load :(

    A sample page with 10 random HTML 5 players: http://pastehtml.com/view/bnse1swth.html

    You can also experience it browsing your own blog: http://blog.soundcloud.com/2012/01/ (altho I couldn’t find a page with 10 players on a page…)

    Loading this slows down Firefox (10.1 here) for 5-20 seconds.

    CPU and RAM usage go crazy for Firefox.exe

    The same in Chrome 16.09 and IE 9 (who cares). Opera 11.61 seems fine tho.

    I guess it’s not SoundCloud’s fault, but nontheless this is inacceptable for the user experience! I go back to the evil Flash player on pages with many players.

    Maybe that’s why SoundCloud doesn’t use the HTML 5 plkayer itself on SoundCloud.com? (user pages, groupos and the dashboard use multiple players ona  page…)

    Windows 7 here, but that shouldn’t matter. 

  • Claudia

    It’s not working in Firefox 9 or IE9,  it’s working fine in Chrome

  • SteveA

    Hi Matas, 
    I’m running Android 2.3.4 on a Droid3.

    For me, the html5 widgets appear.   The play button responds, but there is no audio or time increment.   Are there forthcoming fixes for Android?

    Thanks,
    -Steve

  • Alessione

    Empty white box on firefox, please fix this, on IE9 I don’t see the Like button.
    thx

  • http://profile.yahoo.com/26OQYIUZDDHNDRF2OIYUZSLRQA Subfader

     Would be nice to get an official reply to this.

  • Mike

    Is anyone else having streaming problems in Chrome? I’m using the most recent version of Chrome and am getting stuttering, distortion and slowdown of the audio stream when playing tracks from the widget. 

    It seems to work fine in IE, Safari, and Firefox so I’m not sure what the problem is.

  • guest

    Why doesn’t the HTML5 player work in Firefox?? I don’t understand why this is happening. Is this problem going to be resolved soon?

  • http://www.facebook.com/profile.php?id=100000396336660 Arne Govaerts

    How can this work on a mobile decive? It’s an iframe.

  • Editor

    Honestly guys, add this volume control! i stopped using the html5 soundcloud on our frequently visited music magazine as it is stars with this insane volume! annoying!

  • http://www.facebook.com/profile.php?id=100000396336660 Arne Govaerts

    Is there a way to use the player on a mobile website?

  • http://profile.yahoo.com/26OQYIUZDDHNDRF2OIYUZSLRQA Subfader

    The widget player sometimes takes ages to load! That was not a problem with the Flash player cos it loaded the player instantly and loaded the waveform later. Now you have to wait for everything to load. Big boo :(

    But regarding the feedback here it seems you guys don’t care anyway…