如何将免费的WordPress音乐播放器添加到您的网站

最新推荐文章于 2024-03-31 09:59:33 发布

cunjie3951

最新推荐文章于 2024-03-31 09:59:33 发布

阅读量622

点赞数

文章标签： css js html java javascript ViewUI

任何允许用户发现，购买，共享或下载音乐或其他声音效果的网站都应始终具有音频播放器。每个用户都想预览音频或音乐，以确定是否要购买或共享。为用户提供从网页本身播放此音频的选项，而无需下载任何内容，将带来更好的用户体验。

幸运的是，WordPress提供了免费和高级插件，可以将音频播放器添加到任何网页。大多数免费插件都可以为您完成工作，但只有少数免费插件可让您根据网站的整体设计调整播放器的外观。

音频专辑概述

这个插件的主要目的是将不同的音频文件分组在一起。例如，假设您有一位歌手演唱了十首不同的歌曲。使用此插件，您可以将它们全部归为一个相册，放在一个标题下。然后可以将一致的样式应用于整个专辑，以使其脱颖而出。您可以使用该插件在同一页面上添加多个相册。

以下是其一些功能：

该插件完全响应。默认情况下，它将覆盖封闭元素的整个宽度。
您可以为音乐播放器使用自定义字体。默认情况下，插件将从主题本身继承字体，但是您也可以指定其他字体。
该插件易于自定义，并允许您更改专辑，播放器，文本以及时间和音量条的颜色。

该插件也非常易于使用和设置。现在，让我们开始创建音乐播放器！

创建音乐播放器

该插件提供了两个短代码： [audioalbum]和[audiotrack] 。这两个都是创建播放器所必需的。

[audioalbum]短代码创建专辑的标题。您可以使用其中的title ， detail和date参数来提供有关所创建的专辑或音乐列表的相关信息。

标题将以大写字母显示，并且详细信息或日期将显示在标题下方。这是显示如何使用此短代码的示例。

[audioalbum title="Stay Motivated" detail="Upbeat music by different artists" date="May 2019"]

[audiotrack]短代码还具有几个参数，可让您指定音频源和属性，例如应循环播放，自动播放还是预加载。 title和songwriter属性可用于提供有关歌曲标题及其创建者的信息。这里有些例子：

[audiotrack title="Inspiration" songwriter="Rafael Krux" mp3="path/to/music/inspiration.mp3"]

[audiotrack title="Funshine" songwriter="Kevin MacLeod" mp3="path/to/music/funshine.mp3"]

[audiotrack title="Pickled Pink" songwriter="Kevin MacLeod" mp3="path/to/music/pickled_pink.mp3"]

确保为歌曲指定正确的来源。这四行代码将在您的网页上创建一个音乐播放器，如下图所示。

您可以将属性autoplay="true"和loop="true"到其中一首歌曲，并且它会不断播放，而无需用户按下播放按钮。

自定义音乐播放器

有两种不同的方法可以自定义我们刚刚创建的音乐播放器的外观。

最简单的方法是直接转到外观>自定义>音频专辑 。在这里，您将能够更改专辑背景，播放器背景以及所有文本和按钮的颜色。

如果要对音乐播放器的外观进行其他更改，则必须编写自己CSS来替换或替代插件提供的样式。您可以通过选中底部的“ 手动CSS”复选框来删除插件应用的CSS 。

现在，您可以将自己CSS应用于播放器，并根据自己的喜好自定义其外观。但是，与其从头开始，不如直接将插件应用CSS用作起点并将其放入自己的样式表中，这样可能会更好，这样您就可以在必要时进行更改，而不用重写整个内容。

通过覆盖插件样式表中的一些CSS规则，我为“音频专辑”音乐播放器创建了以下主题。

以下是我更改CSS规则，以使音乐播放器具有所需的外观：

h2.audioalbum {
        font-family: 'passion One';
	font-size: 3rem;
	background: black;
	border-top: 10px solid red;
}

p.audioalbum {
	font-family: 'Exo';
	font-weight: 600;
	font-size: 1.25rem;
	text-transform: uppercase;
	background: linear-gradient(70deg, red 70%, black 70%);
	border-bottom: 5px solid black;
	padding: 10px 10px 5px 10px;
}

.track .songtitle::before {
	box-sizing: border-box;
	content: counter(track);
	counter-increment: track;
	display: inline-block;
	width: 40px;
	background: black;
	position: relative;
	top: 10px;
	left: 10px;
	height: 40px;
	line-height: 1;
	text-align: center;
	border: 4px solid white;
	padding-top: 5px;
	font-weight: bold;
	font-family: 'Passion One';
	font-size: 1.5rem;
	margin-right: 20px;
}

.track .songtitle {
	clear: right;
	display: block;
	font-size: 1.5rem;
	padding: 10px 0 0 0;
	font-family: 'Exo';
}

.track .songwriter {
	color: #fff;
	display: block;
	font-size: 12px;
	line-height: 1;
	opacity: 1;
	padding-left: 60px;
}

.track .wp-audio-shortcode.mejs-audio .mejs-inner>.mejs-controls,
.track .audiobutton a {
	background: black;
}

.track .mejs-controls .mejs-time-rail .mejs-time-total,
.track .mejs-time-rail .mejs-time-total .mejs-time-loaded,
.track .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	background: orange;
	border-radius: 10px;
}

.track .mejs-time-rail .mejs-time-total .mejs-time-current,
.track .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	background: red;
	border-bottom: 5px solid white;
	border-radius: 10px;
}

h2.audioalbum选择器控制音乐播放器中主标题的外观。应用于p.audioalbumCSS规则将控制小标题的外观。线性渐变和色标值的策略性使用在副标题标题栏中创建了倾斜。

对应用于所有音乐播放器元素的各种CSS规则尝试不同的值，以创建自己的独特主题。

其他音乐播放器选项

您可以将[audiotrack]短代码与四个附加参数一起使用来创建弹出窗口。这些弹出窗口可用于向用户显示有关他们正在播放的歌曲或音乐的其他信息。例如，您可以为每个轨道提供一个链接，以打开购买页面，歌词页面或其他一些许可信息页面。

这四个参数是buttonlink ， buttontext ， width和height 。 width和height参数用于指定弹出窗口的宽度和高度。 buttonlink参数存储要在弹出窗口中打开的目标网页的页面或帖子ID。最后， buttontext参数用于指定链接的文本。如果未指定，则链接文本设置为lyrics 。

这是使用这些参数的示例：

[audiotrack title="Inspiration" songwriter="Rafael Krux" mp3="path/to/music/inspiration.mp3" buttonlink="820" buttontext="More from Artist"]

[audiotrack title="Funshine" songwriter="Kevin MacLeod" mp3="path/to/music/funshine.mp3" buttonlink="843" buttontext="Share"]

[audiotrack title="Pickled Pink" songwriter="Kevin MacLeod" mp3="path/to/music/pickled_pink.mp3" buttonlink="909" buttontext="Purchase"]

如您所见，每个轨道对于buttonlink和buttontext参数可以具有自己的值。这是渲染的输出：