Thinking about adding a substantial amount of audio to your site? Or maybe just a clip for a single song? When working with WordPress, there are dozens of different ways to add a music of audio player to your site.
Choosing the one that works best for you can be tough. In this piece, we’ll talk about a couple of solutions, as well as some brief questions that will help you pick the right method for you.
Let’s get started!
What Do You Need From a Music Player?
To figure out which music player to use, we first need to square away what we’ll be using it for. Here’s a handful of different things to consider.
File Support
How are your file types contained? It’s common to have music available as MP3s, but you could be searching for a solution with esoteric support.
Other questions concerning audio file types:
- Do you need to play high-definition or large-size files?
- Are you playing music from audio files, or is the music embedded within a video file?
- Do you need support for audio streams, rather than static files?
- Are you looking to mix file types, such as creating a playlist of several file types?
Controls and Branding
How your music player handles can make a big difference, and is often the difference between a player that fits with a site’s design, and one that was just dropped in. Beyond that, many of the simpler (and less expensive) options for audio players include another business’s branding— and sometimes even advertisements.
Here’s some questions to help you figure out your own needs:
- Do you want another company’s branding on your site?
- Are you looking for customization for the controls available to users?
- Do you want to show ads that you can’t control?
- How integrated do you want your music player to look?
Performance Effects
When choosing an audio player for your site, it’s also important to consider any performance effects. Playing high definition files can slow down user experience, as can embedding a music player from another server. Having a custom or self-hosted audio solution can drastically increase performance, but comes with the downside of building out and maintaining the player.
Here’s some things to consider when looking at performance:
- How quickly do you want audio to be available?
- Do you have a large number of files or large file sizes?
- What level of technical work are you comfortable with handling?
Cost
The last area to look at when choosing a music player is cost. Really this comes in three varieties:
- Are you looking for a free solution?
- Would you pay a one-time fee for one that met your needs?
- Do you rely on an audio player enough that an ongoing cost is acceptable?
Using WordPress Default Embeds For Audio
The easiest way to put a music player on your WordPress site is to use the CMS’s built-in embed system. By placing the link to the audio you’re embedding into the content area of your WordPress editor, an audio player will be automatically embedded. Because of the default integration, it’s free for WordPress users—unless the service where the audio itself is stored has an associated cost.
There’s a couple of important notes for using this method, however.
First, it only supports about 30 services at this time. Though this includes some of the most popular options, such as SoundCloud, Spotify, and Youtube, it is limited. The entire list is available on the Embed page of the WordPress Codex.
Second, this embed often includes code from the third party service where the content is hosted. This can add additional requests and load time to your site. In most cases it’s not noticeable, but it could be a problem on slower website hosts or with larger files.
Third, additional code can also mean additional content. This might come in the form of ads injected into your audio, branding from the service being used, and recommendation systems that might try to suggest something for your user that’s beyond your control.
Embedding a Music Player From a Third Party Website
Similar to WordPress’s default embeds, this method consists of embedding a third-party audio player into your site. The difference here is that as long as the service you’re using to host audio has an embed available, you can add it. That is, if you’re comfortable copying and pasting a snippet of code.
Usually this just involves going to the site, finding their embed or sharing area, and copying the code to your clipboard. Then, you’ll paste that code into either a WordPress widget or directly into the editor of your page or post.
Besides those points, it remains largely the same as using the WordPress defaults. Usage of these embeds is largely free, but come at the risk of reduced speed and unwanted content in front of your users.
Using Music Player Plugins
If you don’t want to deal with code but want to host your own files, there’s a ton of music player plugins available for WordPress.
When using a plugin as a tool to embed third-party audio players, you run into the same benefits and downsides. You won’t have to touch any code now, but you’ll still have the caveats of another company’s branding, potentially their content, and a few calls to their server when your pages load.
For dealing with self-hosted music, there are a bunch of great plugins out there—like ZoomSounds. These take a lot of the difficulty out of using a custom player on your site. Although it is a paid plugin, ZoomSounds brings a host of benefits to the table.
The first benefit is that your audio files can be stored on your own server. This can potentially increase your site’s speed through reducing calls, but you’ll need to have sufficient hosting. On top of that, you’ll have more control over your audio player and user flow on your website. For example, you determine how the media player looks, and the content users see.
Check out our post on premium audio player plugins for WordPress.
Adding a Self-Hosted Music Player to WordPress
If you’re looking for complete control, you can use the Open Source nature of WordPress to create your own audio player. Using a library like Howler.js, you can build a player from scratch, and customize it to match your site perfectly while handling almost any audio file type.
With this control comes a sizeable amount of effort. You’ll either need to be familiar with JavaScript and CSS (and probably a little PHP), or be willing to hire a developer to create and maintain your player.
How Do You Handle Music on Your Site?
With so many options available, the best way to add a music player to your WordPress site really comes back to what your needs are. If you already have an audio solution that you love, let us know in the comments below!