Category: Tech

The new Beatport Pro…mobile optimized!

screenshot of pro.beatport.com webiste home page
pro.beatport.com home

The world’s largest pure electronic dance music retailer, Beatport, today announced http://pro.beatport.com. The new website is mobile responsive. Yes, that’s optimized for mobile devices. Beatport says the color scheme is better for Pro DJs in low light environments for those jocks in the booth purchasing tracks on the fly.

The above view is a screenshot of the home page on a 13″ MacBook Pro. I noticed right away the switch to the audio player at the bottom of the screen, which begets the question – where is your playlist?

pro.beatport.com screenshot of playlist tool
Playlist Tool

Well, Beatport took some liberty here with the “hamburger” menu icon at the bottom right, which usually signifies access to a setting area for account management, user profile management and that sort of thing. Then again, dance music never really stuck with convention, did it? It will probably annoy a bunch of information architects, but as long as you figure out what it it’s for, you’ll be alright. Just click on what UI developers call the “hamburger” icon at the bottom left and you’ll get your tracks listed as shown here.

Beatport also reveals a completely new logo.

Beatport 2014 Logo Update
Beatport 2014 Logo Update

Clark Warner, BEATPORT’s Executive Creative Director says this about the new look:

“The new Beatport logo is all about connections: the universal connection with music; the sacred connection between DJs and fans; and our shared connection with one another as members of this vibrant community and culture. Headphones represent the beginning of these connections, not the end. They’re the point where the DJ first interacts with the music, and with that spark, sets the soundtrack to our musical experience.”

We took some screenshots from the iPhone to show you what the mobile responsive view looks like (as if you haven’t seen it already). But before you get started below, one thing we are curious about is this Beatport Pro direction. Is that for DJs who want to buy music or does that include fans to? According to the press release we got tonight about the beta launch of Beatport Pro, Lloyd Starr, President of Beatport Pro and COO of BEATPORT was quoted as saying:

Beatport has grown into the leading destination for fans of electronic music culture of all stripes over the last 10 years, and Beatport Pro represents our commitment to the DJs that are the lifeblood of this community. It’s a commitment that Beatport was founded on, and one that remains a decade later. I would like to personally invite anyone with constructive feedback, suggestions, and ideas to share them so we can continue to make Beatport Pro the best DJ resource available.”

Hmmm…does that mean that pro.beatport.com will be for DJs and Beatport will then enter the consumer market with a subscription service for rabid Avicii and casual Kaskade fans alike? Inquiring minds think we know.

While you’re thinking about that, have some fun with the screenshots below. Don’t forget, in the new mobile responsive, you have to use the “hamburger” icon menu to flip to the wav to skip through a track. An extra click. Not sure if that was necessary, but maybe it will improve over time. It’s hard to get these web based experiences to react like an experience in a mobile app. Too bad they couldn’t replicate what SoundCloud has done with their wav form scroll in their new mobile app experience.

One gaping hole we almost missed, but then did notice, is the checkout process. It still runs through Beatport.com. I almost missed it, because I wasn’t going to purchase a download just to write this post. But, I said, eh…what the heck. I might as well try it.

I learned you can’t purchase directly through Beatport Pro and that is problematic, because it doesn’t keep with the user workflow they intended with the complete redesign. I wanted to see how the iPhone would handle a download – can you store a download to your phone or do you have to download it at Beatport and then transfer it in via iTunes? It doesn’t look like it’s an end-to-end seamless experience, because on the iPhone, the payment screen is not responsive. Browse through the screens below for a look or try it on your phone yourself.

Beatport Home Screen
Scroll down to begin playback of top ten
Active playback at bottom
Flip to the wav form
Artists I follow
Search result
Login screen
Sign Up/Login call to action
Another login window
My Beatport screen
My Beatport Menu
Hold Bin
Account setting do not yet exist
Beaport Pro Shopping Cart
Add Coupon Code
Beatport Pro Checkout redirect

 

Pioneer Rekordbox Introduction Video

A few weeks ago, I gave Pioneer rekordbox® a spin during a few sets I did at The Nightbell in Asheville, where they’ve got a pair of Nexus 2000s in the booth. I found the software to be quite intuitive to use. Very fast analyzing hundreds of tracks and easy to build playlists. It also syncs with iTunes, but for some reason, I’m having a bit of a struggle since my iTunes folder is on an external thumb drive and not an internal folder on laptop. Haven’t seemed to be able to get it to recognize updates to the iTunes file or playback tracks from the iTunes folder. I had to simply create genre based playlists under the playlists tool and then analyze all tracks on the thumb drive again. Kind of off and hoping someone might be able to help.

On the reverse, the LAN connection with sync and the ability to drag and drop tracks to each deck is genius. We found it extremely useful, but there was this odd situation of jumping back to the last track played every time I dragged a new track in. I had to make sure that when I dragged the track to each deck, the track intended to be next stayed active by playing it for a few seconds and then pressing cue. I was told by a friend that works for Pioneer DJ about the Auto Cue feature, which alleviates this problem. I think it was already on Auto Cue, so I’m not sure I was doing it right. I have yet to fully investigate how to prevent re-loading of a prior track instead of loading the new track before I’ve pressed play.

Given that it’s free, it’s worth a shot to download it and see if it’s right for you. With this software, Pioneer is taking it to Serato and Traktor Pro, given that the software itself can be used for mixing with a controller. You will have to register a user account to operate it though. We think Pioneer wants to start tracking what music you’ve got in your library, so there are some new controls they are introducing to do that in this software.

[ad#Google Adsense 468 x 60]

Making your audio player persistent with jQuery and AJAX

What is the single most important feature of any music website? C’mon, don’t let us stump you that easily. Still thinking? Okay, let us help. It’s the audio player, of course! If you’ve got a hot music site, then you’ve got to have a functioning audio player, so your audience can play back music featured on your website or in your mobile web application (notice I said mobile web application, not mobile application). When serving up those audio tracks, nothing is more frustrating than having a song interrupted while navigating between pages of a website. That means you can’t just deploy any audio player, you’ve got to deploy something with persistence across all site pages, allowing a consistent listening experience while surfing with no obvious break in the action. Wait, did we say that a user can navigate between pages while the audio player remains persistent and it doesn’t disrupt the audio stream? Yes! That’s what we said. After many years of ugly pop-up players or Flash-enabled players in Flash .swf wrappers that kill your site’s SEO, it is finally possible. Lots of sites are now deploying them. Some are even creating themes for WordPress with enhanced audio player experiences, so you get all that for free or a very low cost compared to custom development. The Stylico-DJ-Template features a persistent HTML5 player in the left sidebar. Before we get into the how and why of persistent audio players, here are a few more examples of sites employing these players successfully.

8tracks.com

The best site for hand-crafted Internet radio, where user-generated playlists are all the rage, 8tracks.com recently converted to a persist audio player experience. This advancement will allow listeners to enjoy uninterrupted audio while navigating the site and following their favorite “DJs.” It will surely increase engagement with 8tracks and subsequently, listening hours. check out the player in the screen shot below. It’s at the bottom of the page. (In the interest of full disclosure, the author of this post is an adviser to 8tracks.com and holds shares in the company.)

8tracks.com Audio Player Example Screen Shot

Beatport.com

One of the earliest and best implementations of a persistent audio player, Beatport first innovated with a full, all-Flash experience. Advances in HTML5/CSS3 and jQuery saw Beatport convert their entire experience into an SEO friendly website. This was smart for two reasons. First, it improved search engine optimization of the Beatport site. Flash is notoriously difficult for search engines to crawl, so converting the experience into HTML would helps Google, Bing and other search engines efficiently crawl the site. Second, it was to enable their audio player to work on Apple iPhones. When Apple decided not to support Adobe’s Flash Player plugin, Beatport customers could not play music from the existing Flash site on an iPhone or iPad. This forced Beatport to quickly innovate and come up with a solution for the mobile web, which you can from the screenshot posted see below.

Beatport Home Page Screenshot as of 1/1/13

Play any track on the Beatport home page and the track is added to a playlist found by the drop down arrow to the right of the bright green “add to cart” button in the header. You can jump back and forth and pause/play your track selections and there is a visual representation of the track with a cursor in the timeline that helps you know where you are. Then try and navigate between pages and you’ll see that the player consistently remains fixed and the audio continues to play.

This is similar to the iTunes experience, which has always had a playback feature in the head of the software as shown below. The user has the ability to play a track and navigate throughout the store or their library, as shown below without interruption.

Screenshot of iTunes as of 1/13/13

Finding a way for users to listen to music uninterrupted while surfing the site is one of Beatport’s competitive advantages over its rivals, many of whom continue to deploy pop-over players, which are problematic for a number of reasons. As you can see in the screenshot of the DJDownload website below, the pop-over player gets in the way. It pops up and over the left side of the page, making it very difficult for the user to navigate the site. Since the pop-up player is in its own browser window, just clicking on the main page will bring the main page forward and layer the player behind it making it that much more difficult to use. Today, an audio player should always be persistent on your site. The technology is available, you just have to find the right developer to make it happen for your site. There are a few WordPress themes that feature HTML5 audio players and we hope to see more.

Screenshot of DJDownload.com and its accompanying audio player

Pandora

Another successful deployment of the persistent audio player is on the Pandora website. Pandora is one of the most popular streaming radio services on the Internet. The implementation is also HTML5/CSS3 with jQuery and AJAX, two methods to trigger playback and load new page information in the browser, without stopping audio playback. Whether you change your preferred radio station or click into your user profile, the audio player stays constant.

Pandora Audio Player Screenshot

Reverb Nation

The grandaddy of artist networks and indie music discovery, Reverb Nation recently converted their site and player experience as well. The difference here is the player is on the bottom of the page instead of the top. It’s a different take and we’re wondering what A/B user testing uncovered when they were planning this feature. Does it matter whether the player is fixed to the bottom or the top? Is there an increase of decrease in usage based on location on the page? We’d love to get some feedback on this. Please leave us a comment with your thoughts on the placement of a persistent player experience. Top or bottom – which is better for the user experience?

Reverb Nation Audio Player

MySpace

The new MySpace has launched and its got a new player experience as well. As you can see, all the titles we’ve listened to are in a left/right scrollable slider. The player sits at the bottom of the page – similar to Reverb Nation. All pages load with AJAX, keeping the player persistent.

new.MySpace page with audio player experience as of 1/13/13Here is a view of the new.myspace.com media library. Click on any track it will play in the player at the bottom of the page. Playlists can be created and shared with other new.myspace.com members. Of course, there is no Facebook or Twitter integration, which is understandable given the competitive landscape between these social networks, but that is going to make it much harder for MySpace to gain social traction. You cannot cross-post from MySpace to Facebook or Twitter and vice versa. MySpace is going to have to decide if they want to go down that road. But, we’re getting off track! Back to the player discussion.

Screenshot of the new.myspace.com music library

A Brief Jog Through Our Experience With Audio Players over the past 17+ years

While persistent audio players have long been available in a downloadable client for the desktop (iTunes) or baked into an Adobe Flash experience, it’s only in the last few years you’re seeing them included on web sites as a persistent web app. And, like all audio players that came before it, it’s not all that easy to implement. I mean, it’s not necessarily plug-n-play type thing. You’ve got some work to do to implement them correctly. We”ll get to that, but let’s first start with a little history. When we first started out in this business, the most widely accepted method for streaming audio was to purchase a streaming server from Real Networks or lease space on a server from a hosting company who invested in the technology. Using Real’s server technology, you could broadcast at 14.4kbps, which is a fraction of today’s 10mbps download speeds. Early audio players were rudimentary. They were only meant as a utility to stream audio and not much else. The first image below is the Real Player 2.0, which was released in 1996. Netmix actually used this player to stream our first DJ mixes when we launched in January of 1996. Image of Real Player 2.0 (1996) Here is a view of the latest version of Real Player 16, which has a persistent player experience. The software also acts as a media library along with other advanced features. As you can see, Real Player has advanced considerably over 17+ years.

Real Player 16 Image

Before bandwidth got cheap, Real Networks would power audio on the web for the better part of a decade before being rendered obsolete by HTTP, UDP (User Datagram Protocol) and RTSP (RealTime Streaming Protocol).  At the time, Microsoft would compete with Real Networks, rolling out a competitor to Real Audio and calling it, Windows Media. Here’s the original Windows Media Player. Windows Media Classic VB6 image The latest version is Windows Media 11.

Image of Windows Media Player 11

Not to be left behind, Apple joined the party with its QuickTime streaming technology. All were required to employ a dedicated streaming server to deliver packets of data to their respective desktop clients that had to be downloaded and installed on the end user’s machine. Proprietary and expensive (although all companies offered a version of free for a limited number of consecutive connections), these products became the darlings of corporations who needed a way to stream webcasts for corporate announcements, online trainings and webinars while also keeping their content secure. The the big three controlled streaming audio throughout the 90’s until the MP3 format disrupted the status quo. In the meantime, Adobe would work audio player functionality into it’s Flash SDK (software development kit), which provided a way to create immersive, interactive audio player experiences.  The vector-based tools in Flash gave designers and developers creative license to employ unique and highly stylized players that could be persistent across an entire site. Even though Real Networks developed a proprietary markup language, SMIL, to embed web pages and other multimedia into the Real Player, Flash really took off as the best way to implement audio in a web experience. With Flash, anyone could surf a Flash-enabled website pages while listening to a continuous audio stream that would not stop abruptly when navigating between pages. The dewplayer is a good example of how designers and developers used Flash to create sophisticated and lightweight audio players. The player has various options, from Mini to one called Playlist, which displays a list of files to play. The player at the bottom of the list below shows an emulated black vinyl record, which actually emerges from behind the white box each time a new song is played. Screen shot of Dew Audio Player options To get an idea of how complex Real Audio technology was for developers to deploy, take a look at this Real Networks Production Guide published in 2002, we found on a still functioning service site. And, here is a tutorial on how to create a Flash Audio Player using Flash MX. Noted previously in this article was that Beatport once employed a Flash solution. The entire site was loaded in the browser via a .swf file, which encompasses all the code and graphics needed to display the site and make it interactive. While Flash is still in use today, HTML5 and jQuery can give you similar functionality on a standard web page all without having to load a proprietary file to run a complete web site. One can image how expensive it is to constantly update multiple .swf files that may run a very large web site. Despite the cost, some still prefer to build all-Flash experiences, but they sacrifice search engine optimization best practices in the process. A disgruntled user posted his dismay over Beatport’s migration from Flash to HTML5. Why do away with Flash? Google is the dominant search engine. Its crawlers – the bots that scour all websites to index them for content and relevancy – could’t penetrate the Flash .swf wrapper to index text within the Flash experience. Sure, there are workarounds to point a browser to scan files that would import text into Flash, but doing so was highly problematic when you could really just build a full HTML5 experience and not have to struggle with search engine optimization for Flash. Ultimately, it’s also cheaper to build an HTML5 experience than hire $175-an-hour Flash developers. Some would say that Flash technology has outlived its usefulness for complete end-to-end web sites. It’s now better served to use Flash in very specific use cases. For example, advertising banners or desktop solutions built in Flex that need to be complete, closed solutions and not open web apps that can be more easily modified. We’re at the point where the power of Google’s search and its crawler requirements have reduced the necessity of immersive Flash experiences. With Flash’s hold on the media industry reduced, which technology will now provide a similar audio player experience? Now, there is javaScript, which has evolved to offer a solution. Using HTTP, UDP or RTSP, anyone can employ a javaScript player by embedding it on their website and streaming audio from a web server the listener. It’s now possible, because telecom and cable companies have improved the speed and efficiency of bandwidth to deliver rich media to the user’s desktop or mobile device at a faster rate and more reliably than ever before. In addition, a technology called Really Simple Syndication, which is known in web circles as RSS, allow a listener to subscribe to podcasts that deliver downloads of episodic content to a laptop, desktop or mobile phone. All of the aforementioned advances make downloading, transporting and sharing audio across devices easier. There was a time when Yahoo was focused on creating open source products. During that period, one of their development groups created an immersive javaScript audio player, the Yahoo! Web Player, which could also be installed as a plugin for WordPress. In the screenshot below, you can see that once installed, the player is loaded by a click action on the page. The version in the image below is the full video experience.

Screenshot of Yahoo! Web Player

While the trial site did have a link to the audio only view, we discovered that by clicking on the link for the audio only experience, both Chrome and Safari for Mac returned the audio file in their HTML5 browser based audio players, as shown below.

Safari Audio Player screenshotIn the context of this post, it’s important to address this issue, because many of those who are new to development and working with audio on the web may not know that audio links must start using the new HTML5 download attribute, which is appended inside the link tag like this:

<a href="http://www.google.com/.../logo2w.png" download="MyGoogleLogo">download me</a>

Open Source content management systems including WordPress are inadvertently driving persistent audio player experiences. Free to download and install, these content management systems are extremely popular with DJs, bands and labels. Anyone with a hosting account can quickly set up a blog and within minutes publish a podcast or embed player widgets from services like Reverb Nation, Soundcloud or 8tracks into their sites pages. When it comes to a persistent experience, we’re just starting to see WordPress themes that utilize jQuery and AJAX to deliver the persistent player music fans are increasingly exposed to from the sites we mentioned earlier in this post. If you’re a DJ, artist, band or label, there will be a point in time your users will expect to be able to navigate your site or mobile pages, while listening to audio uninterrupted. We’re anticipating your next question, which is probably, “show me some examples of WordPress themes that have persistent audio players?” Ha! We thought you’d never ask. We mentioned Stylico-DJ-Template, which is available for $18 at Themeforest, a theme and plugin marketplace. The theme uses history,js, which:

…gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.

Stylico WordPress Template Screen shot at Themeforest

 Another example of a WordPress theme using history.js to create a consistent player experience is the predominantly dubstep and mash-up site, sosimpull.com. Notice the player is fixed at the top left. You can navigate between each tab in the playlist and the audio will continue to play.

Screen Shot of SoSimpull.com

How do you build persistent audio players?

After a little bit of research, I came up with a list of links that I’m going to pass to you, which should help you get started in building out your persistent audio player experience.

If you need a little help trying to get AJAX into your theme, here are a few links that may help you out.

Lastly, SEO is very important to this endeavor. If you’re going to AJAX your site’s pages, you’re going to want to do some “deep linking” to content.

For developers, this slide deck might be useful. The author is Ronald Huereca, who presented these slides at WordPress Philadelphia in 2010.

10 Social Music Jobs Available NOW in 2013

After a quick run through of CraigsList, LinkedIn Jobs, Startuply, Digital Media Wire, Digital Music News, Paid Content and Mashable, we've come up with 10 pretty cool social music career opportunities that span the country and touch upon various roles, including Product, Programming, Community, Biz Dev and even an internship.

Read more

Nokia UK launch new music ads on YouTube touting Mix Radio on the Lumina 820

Nokia UK released two very cool new video commercials on YouTube to promote Mix Radio on the new Lumina 820 along with their new Mix Radio service.

Read more