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
- 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:
- Click the ‘Share’ button on any SoundCloud page
- Click ‘Customize player’ and select HTML5 from the option tabs
- 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!