wordpress添加媒体_4种将音频添加到WordPress网站的简单方法

wordpress添加媒体

alt

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.

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

alt

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.

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

alt

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.

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

alt

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后看到的屏幕。 仅当库中有音频文件时,该选项才可用。

alt

Here are the options you can choose for your playlist.

以下是您可以为播放列表选择的选项。

alt

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

这是帖子的文本视图,其中添加了播放列表快捷方式。

alt

And here is how it looks once published.

这是发布后的样子。

alt

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:

无论哪种情况,SoundCloud都可以轻松地将其内容嵌入到您自己的网站中:

  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代码”框。

alt

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

这是粘贴到帖子中的代码的样子。

alt

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

帖子发布后,SoundCloud播放器的外观就会像这样。

alt

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.

其他音频库站点,包括Audiomack,都提供了类似的可嵌入播放器。

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)

MP3-jPlayer主动安装:30,000+评分:4.1,满分5星(68条点评)

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)

完善的背景音乐有效安装次数:20,000+,评分:4.7,满分5星(22条评论)

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)

SoundCloud是Gold活跃安装数量:20,000+,评分:4.2,满分5星(21条评论)

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)

非常简单的播客活跃安装次数:10,000+,评分:4.8,满分5星(126条评论)

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)

音频专辑有效安装次数:3,000+,评分:5星,满分5星(6条评论)

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/

wordpress添加媒体

MP3插件WPaudio音频播放插件 碰到了好的音乐是否想和朋友们分享呢?就把MP3上传到空间,可是这有点太占空间了,而且还有影响加载速度,所以,来看看这款MP3插件吧!WPaudio这款插件简单、易用,只需要把代码拷贝进去,一切OK了,没有了笨重的文件影响页面的加载速度,还能与访客分享好的音乐,何乐而不为呢? WPaudio插件安装: 1.下载WPaudio插件,将压缩包解压后,把文件夹上传到wp-content/plugins/目录下,登录WordPress管理后台,点击“Plugins”找到上传的插件,激活该插件。 2.插件激活后,在后台的左侧栏中“setting”--->“WPaudio”链接,点击链接对其进行设置,如下图: 设置的内容都在图中进行了标示,这款插件其实也没有什么要设置的,只需要勾选相关的选项就OK了。 把上面的内容设置成功后,在发表文章的时候,你就可以把相关的音乐放到文章中了,在文章添加如下代码: •如果你想选择转换MP3链接,你只需要添加wpaudio类到想要转换的链接中,代码:<a href="http://www.youdomain.com/your.mp3"class="wpaudio"> •如果你想禁用下载或指定一个不同的下载地址,使用代码:[wpaudio url="http://www.youdomain.com/your.mp3" text="Artist - Song" dl="0"] 代码添加添加方式,是在编辑器的HTML格式下,进行代码的添加,而且需要注意的时,有时候这款插件可能于某些模版不兼容,造成了不能显示,添加成功后显示页面如下: 出现如上图的图标后,点击图中的图标,就可以播放音乐了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值