We thought it might be neat to post videos from time to time to talk about the Radio Station project and share news, insights, and updates about the plugin. In this video, Netmix founder, Tony Zeoli, talks about how the project came to fruition, advancements to the plugin, and the future of Radio Station.
Here at Netmix, we had a great holiday season. And we hope you did too! While we've been celebrating the New Year, we've also been quite busy with our heads down in our laptops tracking and squashing bugs in the next release, 2.3.0. It's been a while since our last newsletter, so we thought now is as good a time as any to get out an email blast to keep you updated with our progress. We also want to connect with the 50+ new email subscribers who signed up for the newsletter since our last blast!
In December of 1996, Netmix.com first appeared online as the world’s first DJ mix-show website hosting streaming mixes by the world’s most sought after DJs. In the March 20, 1996 issue of Billboard Magazine, Netmix was cited by former Dance Trax columnist, Larry Flick, as the “innovation and advancement of dance music on the Internet.”
Born out of my bedroom in a four-story walk up at 726 Washington Street, just outside of Washington Square in Brookline, MA, I would move Netmix from Boston to New York City in September of 1996 to partner with a dance music promotion company, with the goal of converging promotion and marketing with online streaming and distribution. While the partnership didn’t work out in the long run, Netmix survived in the dotcom 1.0 economy until it entered a purchase and sale agreement on June 1, 2000 with Polyverse, a youth-culture startup funded by investors in the gold rush of the early Internet era, which saw companies like CDNOW, MP3.com, and Psuedo Networks valued in the many hundreds of millions of dollars.
While I was negotiating with Polyverse, the Internet bubble started to burst. Fast forward to October of 2000 and Polyverse was out of cash. No one could raise money. The doors closed on new capital and thousands of startups on both coasts and around the world failed. It was, in no uncertain terms, one of the most difficult periods for founders and employees of these companies who saw their hopes and dreams fall apart when the Internet economy collapsed.
Over the next 19-years, I would hold onto the Netmix.com domain and keep the website active. In the late 2000s I launched the Netmix Global House Sessions Podcast, which is still ingrained into this site today (and for the foreseeable future). The podcast features my alter ego, DJ Tony Z, in the mix. But Netmix became a side hobby while I focused on working for various corporations and startups in New York City until 2010, when I asked my wife to move to Chapel Hill, NC for a job at the University of North Carolina.
In North Carolina for 9-years now, we skipped across the state; from Chapel Hill to Winston-Salem and now Asheville, NC. My wife and I adopted a baby boy at birth who was born in the Asheville area. My family became the priority while I also ran my WordPress consulting company, Digital Strategy Works. I had ideas for Netmix, but life’s priorities simply got in the way.
A few years ago, I got it in mind to host a radio mix-show on a Low Power FM here in Asheville, AshevilleFM. My friend, Phillip and I created the Asheville House Music Society and hosted the show on the station for about a year, but we had to put the show on hiatus. In September of 2018, we brought the show back on the air on another LPFM in Asheville, WPVMFM.org, where I volunteer as the station’s webmaster. While working on the station’s website, I noticed they were using a WordPress plugin, Radio Station, which was originally created by a developer in Colorado, Nikki Blight. The plugin hadn’t been updated on the site in a while, so I checked in on the WordPress codex to review the plugin and its status. When I learned Nikki was no longer actively developing the plugin and saw that there was an installed user base, I contacted her to inquire about it and let her know that I’d consider taking it over.
After a brief conversation, Nikki passed along the car keys to the plugin in early June (2019) and wished me luck. After 16-years of working with WordPress, I am now an official manager and committer of a plugin listed in the WordPress repository. But, I’m not a developer myself. I’m a product manager and entrepreneur with deep experience managing WordPress projects, so I needed help bringing the plugin up to speed. I put the word out in the WordPress universe and the universe returned Tony Hayes, an experienced WordPress developer living about two-hours south of Brisbane, Australia. Tony’s work includes http://wpmedic.tech and other plugins that check on the health of WordPress websites.
For the past three months, Tony and I have been working together on the open-source, free version of the plugin. We’ve also had a contribution from another developer working at a radio station in Virginia, who helped bring the plugin up to WordPress coding standards. We’ve made some improvements to the plugin and are actively working on building a PRO version with an audio player, time zone switcher, and a few other neat features. But for now, we’re tightening up the plugin and its core feature set.
We’re also looking at integrating the plugin with a few popular radio station automation software packages, like AirTime and LibreTime.
After 19-years of controlling the Netmix domain name and website, I decided on merging Radio Station with Netmix, which is why the plugin is now hosted here on this site and it will carry the Netmix brand going forward, along with all the bells and whistles we hope to add to it.
We’re always looking for contributions from the community. If you’d like to join in the fun, please do visit the Radio Station project on Github and take a stab at fixing something or adding something, then issuing a pull request. We’d love to get contributions from the radio station community supporting open-source projects.
I’m so excited I finally found and merged a worthy WordPress project with the Netmix brand. Over the next couple of months, you’ll see some changes to this website. It’s a work in progress and slow going, but we’re committed to advancing the plugin, building out a PRO version with additional awesome features, and figuring it all out as we go along. We’d love to know what you think of the plugin, so leave a comment on this post below. And, please do share this plugin in your networks, so we can grow participation and installs – that’s how this is going to succeed.
Radio Station is a plugin to run a radio station's website. It's functionality is based on Drupal 6's Station plugin, reworked for use in Wordpress. The plugin includes the ability to associate users with "shows", display the currently on-air DJ, store playlists, and more.
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.
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.)
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.
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.
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.
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.
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?
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.
Here 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.
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. 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.
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. The latest version is Windows Media 11.
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.
In 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.
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.
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.
- Let’s start with history,js, which we mentioned already, but it’s worth mentioning again.
- The Future of Web Apps – Single Page Applications – One of the earliest posts I’ve found about how to AJAX your site pages to deliver content into a page without refreshing the page. Features a JPlayer Single Page Web App Demo, the JPlayer using AJAX to switch between tabs but keep the player persistent.
- Persistent Audio Players with JPlayer – Jon McLaughlin post in Google Groups about his use of the “hijax” method to change all internal links to AJAX calls on his site, RedApple45.com.
- JPlayer – The JPlayer web site, where you can download the HTML5 Audio and Video player for jQuery.
- jQuery4U post of the 10 BEST JQUERY AND HTML5 MEDIA PLAYERS
If you need a little help trying to get AJAX into your theme, here are a few links that may help you out.
- How to get Ajax into a theme – without writing a plugin? – Look no further than StackExchange to help sort out this question. One developer’s answer to this perplexing question.
- There is a WordPress plugin called the Advanced AJAX Page Loader, which may (or not) be useful if you’re not trying to build this from scratch.
- AJAXing a WordPress Theme | CSS-Tricks – A video tutorial from 2010 on how to AJAX your WordPress theme.
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.