This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

Do you have audio files you want to share with your audience? Facebook won’t let you… unless you resort to frustrating trickery like sharing an audio file in Dropbox or converting it to video. But if you’re hosting your own WordPress website, nothing could be easier.

您是否有想要与听众共享的音频文件? Facebook不会允许您……除非您采取令人沮丧的骗术,例如在Dropbox中共享音频文件或将其转换为视频。 但是,如果您托管自己的WordPress网站,没有比这容易的事了。

If the mention of adding audio to websites gives you pause, let me explain. I’m not talking about adding cheesy background music to an animated-GIF-laden GeoCities site.

如果提及在网站上添加音频使您感到停顿,请让我解释一下。 我不是在谈论将俗气的背景音乐添加到带有GIF动画的GeoCities网站中。

Though it’s not a good idea to add music to your site just for the sake of it, there are some good and valid reasons to include audio in your website. Here are a few:

尽管仅出于此目的将音乐添加到您的网站不是一个好主意,但是有一些充分而有效的理由将音频包括在您的网站中。 这里有一些:

  • A musician sharing samples of her music.

  • A podcaster making his shows available.

  • Schools, churches and event websites allowing visitors to listen to seminars, sermons or keynotes.

  • Teachers, trainers and educators including audio examples in their online lessons.

  • Bloggers adding bonus content to their site, for example, interviews.


You may not realise this, but WordPress is capable of handling audio files by default. It’s not hard—if you know how to insert an image in the post, you won’t have any problems inserting audio.

您可能没有意识到这一点,但是WordPress默认情况下能够处理音频文件。 这并不难-如果您知道如何在帖子中插入图片,则插入音频不会有任何问题。

Before HTML5 there was no standard way of playing audio on a web page. Flash was widely used. It wasn’t pretty. WordPress uses HTML5 to embed audio, so it’s compatible with most browsers and devices, including mobile devices.

在HTML5之前,没有标准的方法可以在网页上播放音频。 Flash被广泛使用。 不好看 WordPress使用HTML5嵌入音频,因此与大多数浏览器和设备(包括移动设备)兼容。

There are other ways to include audio in your site. These include embeddable players by third parties (including audio library sites), and WordPress plugins. These give the benefit of additional features, and the ability to use audio from library sites.

还有其他方法可以在网站中包含音频。 其中包括第三方(包括音频库站点)可嵌入的播放器,以及WordPress插件。 这些功能带来了附加功能的好处,以及使用图书馆站点音频的功能。

Of course, only use audio files you can legally use. This would include audio you created yourself, audio you have licensed from others, and royalty free audio. The sample audio used in this article comes from YouTube’s Audio Library of free music.

当然,仅使用您可以合法使用的音频文件。 其中包括您自己创建的音频,从他人处获得许可的音频以及免版税的音频。 本文使用的示例音频来自YouTube的免费音乐音频库

1.使用WordPress音频播放器 (1. Use the WordPress Audio Player)

The easiest way to add audio to your website is with WordPress’ native audio player. Unless you have specific needs, there’s little reason to look elsewhere.

向网站添加音频的最简单方法是使用WordPress的本地音频播放器。 除非您有特定需求,否则没有理由去其他地方。

You can add .mp3, .m4a, .ogg, or .wav files to your WordPress media library. From there you can insert it into your post, along with an optional caption.

您可以将.mp3,.m4a,.ogg或.wav文件添加到WordPress媒体库中。 从那里,您可以将其与可选标题一起插入到帖子中。

Here’s how:


  1. Click the Add Media button.

    单击Add Media按钮。

  2. Drag your audio file onto the library, or click the Upload Files then Select Files to add your audio content to the Media Library.

    将音频文件拖到库中,或单击“上Upload Files然后Select Files以将音频内容添加到媒体库中。

  3. At the right on the screen, fill in the relevant metadata for the audio file, including title, artist, album, caption and description.

  4. Make sure the Embed Media Player option is selected to allow your readers to play the audio file from your post.

    确保选中“ Embed Media Player选项,以使您的读者可以播放帖子中的音频文件。

  5. Click Insert into Post.

    点击Insert into Post

Here is a screenshot of the Media Player after some audio files have been added. You can fill in the relevant metadata for the file in the panel on the right.

这是添加了一些音频文件后的媒体播放器的屏幕截图。 您可以在右侧面板中填写文件的相关元数据。


And now a text view of a post after an image has been added (see the second paragraph). The screenshot also demonstrates a few other ways to add code for the audio player manually.

现在,添加图像后帖子的文本视图(请参阅第二段)。 屏幕快照还演示了其他几种手动添加音频播放器代码的方法。


And this is what the post looks like when previewing, or after it is published. A mini player is displayed for the audio file. Note that the player looks the same for all three methods.

这就是帖子在预览时或发布后的样子。 将显示一个用于音频文件的迷你播放器。 请注意,这三种方法的播放器外观都相同。


Live Example


Try clicking on the audio file below to hear it play.


You don’t have to store audio files in your WordPress Media Player. Storing them on another server will take the load off your web hosting, saving you storage space, system resources and bandwidth. In that case, use the same audio shortcode, but with the correct URL for the audio file.

您不必将音频文件存储在WordPress Media Player中。 将它们存储在另一台服务器上可以减轻网络托管的负担,从而节省存储空间,系统资源和带宽。 在这种情况下,请使用相同的音频短代码,但使用正确的音频文件URL。

The audio file can be looped or autoplayed by adding some options to the code (see the Audio Shortcode page on WordPress.org). To change the color of the media player, you need to use custom CSS like this:

通过在代码中添加一些选项,可以循环播放或自动播放音频文件(请参阅WordPress.org上的“ 音频简码”页面)。 要更改媒体播放器的颜色,您需要使用以下自定义CSS:

.music-player .wp-playlist-light,
.music-player .wp-playlist-light .wp-playlist-playing {
    background: #999;
    border-color: #999;

Alternatively, if additional functionality or customizing the appearance of the media player is important to you, check out the plugins below.


2.创建一个WordPress音频播放列表 (2. Create a WordPress Audio Playlist)

Do you have more than one audio file to share? Support for playlists is also build right into WordPress. Here’s how to get started:

您要共享多个音频文件吗? WordPress还内置了对播放列表的支持。 入门方法如下:

  1. In your Media Library, click on Create Audio Playlist.

    在您的媒体库中,点击Create Audio Playlist

  2. Select the audio files you’d like included in the playlist.

  3. Add any relevant metadata for the playlist, then click Create a new playlist.

    为播放列表添加任何相关的元数据,然后点击Create a new playlist

  4. Select the required options (for displaying the track list, artist name and artwork), then click Insert audio playlist.

    选择所需的选项(用于显示曲目列表,艺术家姓名和插图),然后单击“ Insert audio playlist

Here is the screen you see after clicking Create Audio Playlist from the Media Library. That option is only available if there are audio files in the library.

这是单击“媒体库”中的“ Create Audio Playlist后看到的屏幕。 仅当库中有音频文件时,该选项才可用。


Here are the options you can choose for your playlist.



Here’s a text view of a post with the playlist shortcake added.



And here is how it looks once published.



Live Example


Here’s an embedded playlist you can play with.


3.使用SoundCloud的播放器嵌入音频 (3. Embed Audio with SoundCloud’s Player)

SoundCloud is a popular service created specifically for sharing music online. It’s basically YouTube for audio. You can use SoundCloud to host the audio you embed in your website. Alternatively, there may already be content on SoundCloud you’d like to share with your website visitors.

SoundCloud是一项流行的服务,专门用于在线共享音乐。 基本上是YouTube音频。 您可以使用SoundCloud托管嵌入到网站中的音频。 另外,SoundCloud上可能已经有您想要与网站访问者共享的内容。

In either case, SoundCloud makes it easy to embed their content on your own website:


  1. Any audio file on SoundCloud that allows embeds will have a share button under the audio file. Press it.

    SoundCloud上允许嵌入的任何音频文件在该音频文件下方都有一个共享按钮。 按下。
  2. Click on Embed and choose either the large square player or smaller rectangular one. Choose any options you require.

    单击“ Embed然后选择较大的方形播放器或较小的矩形播放器。 选择您需要的任何选项。

  3. Copy the code and paste it into your post.


Here is the screen that’s displayed after clicking the “share” button on SoundCloud. Click on Embed at the top, and select the options you like. Do not check the “WordPress code” box unless your site is hosted at WordPress.com.

这是单击SoundCloud上的“共享”按钮后显示的屏幕。 单击顶部的“ Embed ”,然后选择所需的选项。 除非您的网站托管在WordPress.com上,否则不要选中“ WordPress代码”框。


Here’s what the code looks like when pasted into your post.



And here is what the SoundCloud player looks like once your post is live.



You can also use the plugin SoundCloud is Gold, which we’ll include below.

您还可以使用插件SoundCloud is Gold,我们将在下面提供该插件。

Other audio library sites, including Audiomack provide a similar embeddable players.


4.使用WordPress音频插件 (4. Use a WordPress Audio Plugin)

If you’re looking for extended functionality or greater configurability than the WordPress Audio Player supports, grab a plugin. Here are some highly rated options that might have what you’re looking for.

如果您正在寻找比WordPress Audio Player支持的扩展功能或更高的可配置性,请抓住一个插件。 这里有一些您可能正在寻找的,评价很高的选项。

Compact WP Audio Player Active installs: 40,000+ Rated: 4.3 out of 5 stars (49 reviews)

Compact WP Audio Player有效安装次数:40,000 +评分:4.3星,满分5星(49条评论)

This audio player is much more compact than the default. It appears as just a play icon. It supports .mp3 and .ogg audio formats.

此音频播放器比默认播放器紧凑得多。 它只是一个播放图标。 它支持.mp3.ogg音频格式。

MP3-jPlayer Active installs: 30,000+ Rated: 4.1 out of 5 stars (68 reviews)


A flexible multi-player audio plugin that expands WordPress’ native shortcodes with new functions and options. Has style, color and layout options, a drag and drop interface, and plays media from your media library, uploaded folders, and URLs.

灵活的多人音频插件,可通过新功能和选项扩展WordPress的本机短代码。 具有样式,颜色和布局选项,具有拖放界面,并播放媒体库,上载的文件夹和URL中的媒体。

Soundy Background Music Active installs: 20,000+ Rated: 4.7 out of 5 stars (22 reviews)


This plugin automatically plays an audio file whenever a page is being viewed. An optional play/pause button can be displayed.

每当查看页面时,此插件都会自动播放音频文件。 可以显示一个可选的播放/暂停按钮。

SoundCloud is Gold Active installs: 20,000+ Rated: 4.2 out of 5 stars (21 reviews)


This plugin is an excellent way of integrating your SoundCloud content into WordPress. If you’re a big user of SoundCloud, this one is for you.

该插件是将您的SoundCloud内容集成到WordPress的绝佳方法。 如果您是SoundCloud的大用户,那么这个适合您。

Seriously Simple Podcasting Active installs: 10,000+ Rated: 4.8 out of 5 stars (126 reviews)


An easy-to-use podcasting solution for WordPress. Powerful features, but simple to use. A growing library of add-ons is available, including a free statistics add-on.

易于使用的WordPress播客解决方案。 功能强大,但易于使用。 可以使用不断增长的附加组件库,包括免费的统计附加组件。

mb.miniAudioPlayer Active installs: 10,000+ Rated: 4.6 out of 5 stars (44 reviews)

mb.miniAudioPlayer主动安装:10,000 +评分:4.6 / 5星(44条评论)

A easy-to-use skinnable audio player. The online skin editor makes it easy to customise the appearance of your player.

易于使用的皮肤音频播放器。 在线皮肤编辑器可轻松自定义播放器的外观。

Audio Album Active installs: 3,000+ Rated: 5 out of 5 stars (6 reviews)


An excellent plugin for creating as many configurable playlists for your website as you like.


Adding audio to your site is just one of the many interactions you can do with WordPress. If you’re looking for feature-rich managed WordPress hosting, check out our partner, SiteGround, which also provides free website migrations.

将音频添加到您的站点只是您可以与WordPress进行的众多交互之一。 如果您正在寻找功能丰富的托管WordPress托管,请查看我们的合作伙伴SiteGround ,它还提供免费的网站迁移。

Do you include audio on your site? Which method do you use?

您是否在网站上包含音频? 您使用哪种方法?

翻译自: https://www.sitepoint.com/4-simple-ways-add-audio-wordpress-site/


参与评论 您还未登录,请先 登录 后发表或查看评论


  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
钱包余额 0