4 Simple Ways to Add Audio to Your WordPress Site

Easy to add audio files on your WordPress website without any coding knowledge! This article will guide you how to use WordPress built-in features and plug-ins to easily add audio content and improve user experience.

Key points:

• WordPress supports audio files by default, adding audio is as simple as adding pictures.
• WordPress comes with audio player that supports MP3, M4A, OGG and WAV formats, and can create playlists.
• You can use external audio hosting platforms such as SoundCloud to embed audio to reduce the burden on the server.
• If you need more features or customization options, you can use plug-ins such as Compact WP Audio Player, MP3-jPlayer, and SoundCloud is Gold.

This article is created in collaboration with SiteGround. Thanks to our partners for supporting us for making SitePoint possible.

Want to share audio files on your website? Facebook does not allow sharing audio directly unless you take tedious methods such as sharing on Dropbox or converting to video. But if you have your own WordPress website, this will be very simple.

Adding audio is not difficult. We are not referring to adding cheesy background music to an outdated website full of GIF animations. Although it is not a wise move to add music casually, it does have a reasonable use to include audio on the website:

• Musicians share music samples.
• Bloggers share podcasts.
• Schools, churches and event websites provide audio for seminars, sermons or keynotes.
• Teachers, trainers and educators add audio examples to online courses.
• Bloggers add interviews and other extra content.

You may not know that WordPress supports audio file processing by default. If you know how to insert images into articles, inserting audio is just as easy.

Before HTML5, there was no standard method for playing audio on web pages. Flash was used widely, but the effect was not ideal. WordPress uses HTML5 to embed audio and is compatible with most browsers and devices, including mobile devices.

There are other ways to add audio to your website, including embedded players and WordPress plugins for third parties, including audio library sites. These methods provide additional functionality and allow the use of audio from the library website.

Of course, only use audio files that you have the right to use, including audio you created yourself, licensed audio and royalty-free audio. The sample audio used in this article comes from YouTube's free music library.

1. Use WordPress Audio Player

The easiest way to add audio to a website is to use the audio player that comes with WordPress. Unless you have special needs, there is no need to look for other ways.

You can add MP3, M4A, OGG, or WAV files to your WordPress media library. You can then insert it into the article and add an optional title.

The steps are as follows:

1. Click on the "Add Media" button.
2. Drag and drop the audio file into the library, or click "Upload File" and select the file to add the audio content to the media library.
3. On the right side of the screen, fill in the relevant metadata of the audio file, including title, artist, album, title, and description.
4. Make sure the Embed Media Player option is selected so that readers can play audio files from your article.
5. Click "Insert to Article".

The following is a screenshot of the media player after adding some audio files. You can fill in the relevant metadata of the file in the panel on the right.

The following is a text view of the article after adding the image (see the second paragraph). This screenshot also demonstrates several other ways to manually add audio player code.

The following is the look of the article after preview or posting. A mini player that displays audio files. Note that the player looks the same for all three methods.

Example:

Click the audio file below to listen:

https://www.php.cn/link/18091ec91aec4f3a9a5f2aa73c0a18ca

You do not need to store audio files in WordPress media player. Store them on other servers can reduce the load on hosting your website, saving storage space, system resources, and bandwidth. In this case, use the same audio shortcode, but use the correct URL of the audio file.

You can loop or automatically play audio files by adding some options to your code (see the audio shortcode page on WordPress.org). To change the color of the media player, you need to use the following custom CSS:

<code>.music-player .wp-playlist-light,
.music-player .wp-playlist-light .wp-playlist-playing {
    background: #999;
    border-color: #999;
}</code>

Or, if you need extra features or customize the look of the media player, check out the plugin below.

(The following content is similar to the original text, but the sentence adjustments and paragraph divisions have been made to achieve pseudo-original effects, and pictures and links have been retained)

2. Create WordPress audio playlist

Do you have multiple audio files to share? WordPress also has built-in playlist support. Here is the way to get started:

1. In the media library, click "Create Audio Playlist".
2. Select the audio file to include in the playlist.
3. Add the relevant metadata for the playlist and click "Create a new playlist".
4. Select the desired option (for displaying track list, artist name, and picture) and click "Insert Audio Playlist".

The following is the screen you see after clicking on "Create Audio Playlist" in the media library. This option is only available if there are audio files in the library.

The following are the options you can choose for the playlist.

The following is a text view of the article after adding the playlist shortcode.

The following is the appearance after release.

Example:

This is an embedded playlist you can play:

1. Digital Watch Alarm Long
2. Medium Bell Ringing Near
3. Crowd Yelling Series
4. Walking on Hollow Metal
5. Walk on Grass Series

3. Embed audio using SoundCloud player

SoundCloud is a popular service dedicated to sharing music online, similar to the audio version of YouTube. You can use SoundCloud to host audio from your embedded website, or share content already on SoundCloud.

SoundCloud simplifies the process of embedding content on its website:

1. Any SoundCloud audio file that allows embedded will have a share button below it. Click on it.
2. Click "Embed" and select a large square player or a smaller rectangular player. Select any option you need.
3. Copy the code and paste it into your post.

The following is the screen displayed after clicking the "Share" button on SoundCloud. Click Embed at the top and select the option you prefer. Don't check the "WordPress Code" box unless your website is hosted on WordPress.com.

The following is what it looks like after pasting the code into the article.

The following is the appearance of the SoundCloud player after your article goes live.

You can also use the plugin SoundCloud is Gold, which we will introduce below. Other audio library websites, including Audiomack, offer similar embedded players.

4. Use WordPress audio plugin

If you need more powerful features or more flexible configurations than WordPress audio players, you can use the plugin. Here are some highly rated options that may contain what you need. (The plugin list is consistent with the original text, repeated description is omitted)

Adding audio on your website is just one of many interactions you can do with WordPress. If you are looking for feature-rich hosting WordPress hosting, check out our partner SiteGround, which also offers free website migration services. Do you include audio on your website? Which method do you use?

(The FAQ part is similar to the original text, but the sentence adjustment and paragraph division are made to achieve pseudo-original effect)

The above is the detailed content of 4 Simple Ways to Add Audio to Your WordPress Site. For more information, please follow other related articles on the PHP Chinese website!