如何将免费的WordPress音乐播放器添加到您的网站
任何允许用户发现,购买,共享或下载音乐或其他声音效果的网站都应始终具有音频播放器。 每个用户都想预览音频或音乐,以确定是否要购买或共享。 为用户提供从网页本身播放此音频的选项,而无需下载任何内容,将带来更好的用户体验。
幸运的是,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.audioalbum
CSS规则将控制小标题的外观。 线性渐变和色标值的策略性使用在副标题标题栏中创建了倾斜。
对应用于所有音乐播放器元素的各种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
参数可以具有自己的值。 这是渲染的输出:
单击任何“ 购买”按钮将打开一个弹出窗口,其中包含由buttonlink
参数中指定的ID确定的网页或帖子。
最后的想法
如您在本教程中所见,“音频专辑”插件使您可以轻松地将音频或音乐播放器添加到您的网站。 您需要做的就是在要显示音乐播放器的网页上添加几个短代码。 您还可以在同一网页上显示多个播放器,以便为不同类型的音乐或歌曲创建多个组。 您可以访问插件页面以阅读音频专辑的常见问题解答 。
翻译自: https://code.tutsplus.com/tutorials/how-to-add-a-free-wordpress-music-player-to-your-site--cms-33340
如何将免费的WordPress音乐播放器添加到您的网站相关推荐
- 将音乐播放器添加到WordPress网站
考虑向您的网站添加大量音频? 还是只是一首歌曲的剪辑? 使用WordPress时,有数十种不同的方法可将音乐或音频播放器添加到您的网站. 选择最适合您的选择可能很困难. 在本文中,我们将讨论一些解决方 ...
- 虾米播播音乐墙html,WordPress音乐播放器插件Hermit X(支持网易云、QQ音乐、虾米等)...
Hermit X,使用 APlayer 前端播放器,Meting Framework & LWL API 后端支持的全新 WordPress 播放器 现已问世! 特性 支持直接调用网易云音乐. ...
- Python—实现本地音乐播放器(添加/播放/暂停/下一首/上一首/音量/打开超链接)
Python-实现本地音乐播放器(添加/播放/暂停/下一首/上一首/音量/打开超链接) 1.样例 2.分析 1.播放器界面 2.功能 2.1播放器界面 button:添加/播放/暂停/下一首/上一首 ...
- php文件添加音乐播放器,window_win10系统自带Groove音乐播放器在哪?自带Groove音乐播放器添加音乐等功能的使用教程, 播放器在哪?1 - phpStudy...
win10系统自带Groove音乐播放器在哪?自带Groove音乐播放器添加音乐等功能的使用教程 播放器在哪? 1.点击桌面的左下端"开始菜单"符号,然后在右上角,找到" ...
- html5模仿手机音乐播放器(添加音乐进度条和时长)
今天用html+js+cs写了一个类似手机音乐播放器的小东东,代码规范性不是很好,高手切勿喷,新手可以看看,其中歌词同步js代码参考了一个老师的代码.自己添加的是点击按钮页面滑动,和上一曲下一曲播放, ...
- php 电台pls 怎么播放,怎样给Linux音乐播放器添加电台列表
盲人朋友喜欢收听网络电台,可是Linux下没有龙卷风收音机这样的软件,怎么办呢? Ubuntu Linux下有两款音乐播放器:Rhythmbox和Audacious,它们都支持导入m3u格式的播放列表 ...
- 基于android的网络音乐播放器-添加viewpager和fragment实现滑动切换多个界面(二)
作为android初学者,最近把疯狂android讲义和疯狂Java讲义看了一遍,看到书中介绍的知识点非常多,很难全部记住,为了更好的掌握基础知识点,我将开发一个网络音乐播放器-EasyMusic来巩 ...
- 最好的免费WordPress音频播放器插件
出于多种原因,您可能希望在网站中嵌入音频. 例如,也许您出售自己的音乐,并希望在要求用户购买歌曲之前先预览一下,或者您可能只想拥有基于文本的帖子的音频版本. 无论哪种情况,WordPress都会提供很 ...
- mplayer-php,jQuery MPlayer网站音乐播放器插件
jQuery MPlayer网站音乐播放器插件 这是一款2017年贺新春版的红色喜庆音乐播放器代码,jQuery MPlayer网站音乐播放器插件下载. 注意:演示效果在左下角收起来了,别以为没演示! ...
最新文章
- js能关闭HTML页面,javascript可以关闭吗
- 《Adobe Flash Professional CC经典教程》——1.3 使用“库”面板
- 【收藏】编译安装keepalived
- JVM基础(6)-常用参数总结
- 08 线性回归 + 基础优化算法【动手学深度学习v2】
- CodeForces - 1453E Dog Snacks(树形dp+贪心)
- 实战 | GitLab + Docker 实现多环境部署
- MySQL04:DDL数据定义语言
- 广度优先搜索算法(Breath-first Search)是如何搜索一张图的?
- microsoft edge怎么截长图_苹果12怎么截图截长屏 iphone 12截长图快捷键方法介绍
- 数据分析,怎么做才够“精准”
- Kylin 之Cube 构建优化
- 阿里云双十一服务器注册流程
- cuba_CUBA 7的新功能
- 移动端H5页面设计知识
- ssh-keygen命令详解
- python中文朗读_用python实现的文字朗读
- 无聊的逗 蓝桥杯 python
- java心跳 谁发谁_java 心跳机制
- ue4html插件,【UE4插件Mirror】全球超千万Maya用户终于可以高质量实时渲染了