WordPress自定义域和HTML5的简单音乐播放器

2021-08-24 0 1,201

一个简洁、多形式（标准、图像、相册、音乐、视频、引用和链接）的wordpress博客主题，致力于四仙秋诗歌集。对于音乐和视频，网易云音乐和优酷视频原本打算使用，但所有沙龙网站都使用 HTTPS。网易云音乐和优酷视频不支持 HTTPS 访问，因此使用本地 HTML5 音乐和视频播放器。
本文将介绍如何创建 WordPress 简明 HTML5 音乐播放器，并通过自定义字段获取音乐地址。

`HTML5` 代码

添加到需要显示 HTML5 音乐播放器的地方

代码中判断了是否有自定义域 audio 这个值，如果没有就不输出整段代码。

`JS` 代码

添加到主题的 JS 文件中

```
css
```

`CSS` 代码

添加到主题文件的 CSS 文件中

/***************HTML5 音乐播放器***************/
.player{
    background-color: #fff;
    border-top: 1px #eee solid;
    border-right: 1px #eee solid;
    border-left: 1px #eee solid;
    padding: 20px;
}
.player h3{
    margin: 12px 0 0 8px;
}
/*播放按钮*/
.audioplayer {
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: #f8f8f8;
}


.audioplayer > div {
    position: absolute;
}


.audioplayer-playpause {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-color: #447110;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 10px;
    left: 20px;
}


.audioplayer-playpause:hover,
.audioplayer-playpause:focus {
    background-color: #024e48;
}


.audioplayer-playpause a {
    display: block;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}


.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-right: none;
    border-left-color: #fff;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -2px;
    /* 8 4 */
    ;
}


.audioplayer-playing .audioplayer-playpause a {
    width: 9px;
    height: 9px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -4px 0 0 -4px;
    /* 6 */
    ;
}


.audioplayer-playing .audioplayer-playpause a:before,
.audioplayer-playing .audioplayer-playpause a:after {
    width: 40%;
    height: 100%;
    background-color: #fff;
    content: '';
    position: absolute;
    top: 0;
}


.audioplayer-playing .audioplayer-playpause a:before {
    left: 0;
}


.audioplayer-playing .audioplayer-playpause a:after {
    rightright: 0;
}


/*时间*/
.audioplayer-time {
    width: 46px;
    height: 100%;
    line-height: 54px;
    text-align: center;
    z-index: 2;
    top: 0;
}


.audioplayer-time-current {
    left: 68px;
}


.audioplayer-time-duration {
    rightright: 32px;
}


.audioplayer-novolume .audioplayer-time-duration {
    border-right: 0;
    rightright: 0;
}


/*播放条*/
.audioplayer-bar {
    height: 8px;
    /* 14 */
    background-color: #e4e4e4;
    cursor: pointer;
    z-index: 1;
    top: 50%;
    rightright: 6.875em;
    /* 110 */
    left: 120px;
    /* 110 */
    margin-top: -4px;
    /* 7 */
    ;
}


.audioplayer-novolume .audioplayer-bar {
    rightright: 4.375em;
}


.audioplayer-bar div {
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}


.audioplayer-bar-loaded {
    background-color: #e4e4e4;
    z-index: 1;
}


.audioplayer-bar-played {
    background: #447110;
    z-index: 2;
}
/*音量*/
.audioplayer-volume {
    width: 36px;
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    rightright: 0;
}


.audioplayer-volume:hover,
.audioplayer-volume:focus {
    background-color: #f8f8f8;
}


.audioplayer-volume-button {
    width: 100%;
    height: 100%;
}


.audioplayer-volume-button a {
    width: 0.313em;
    /* 5 */
    height: 0.375em;
    /* 6 */
    background-color: #447110;
    display: block;
    position: relative;
    z-index: 1;
    top: 50%;
    left: 35%;
    margin-top: -2px;
}


.audioplayer-volume-button a:before,
.audioplayer-volume-button a:after {
    content: '';
    position: absolute;
}


.audioplayer-volume-button a:before {
    width: 0;
    height: 0;
    border: 0.5em solid transparent;
    /* 8 */
    border-left: none;
    border-right-color: #447110;
    z-index: 2;
    top: 50%;
    rightright: -0.25em;
    margin-top: -0.5em;
    /* 8 */
    ;
}


.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after {
    /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
    width: 0.313em;
    /* 5 */
    height: 0.313em;
    /* 5 */
    border: 0.25em double #447110;
    /* 4 */
    border-width: 0.25em 0.25em 0 0;
    /* 4 */
    left: 0.563em;
    /* 9 */
    top: -0.063em;
    /* 1 */
    -webkit-border-radius: 0 0.938em 0 0;
    /* 15 */
    -moz-border-radius: 0 0.938em 0 0;
    /* 15 */
    border-radius: 0 0.938em 0 0;
    /* 15 */
    -webkit-transform: rotate( 45deg);
    -moz-transform: rotate( 45deg);
    -ms-transform: rotate( 45deg);
    -o-transform: rotate( 45deg);
    transform: rotate( 45deg);
}


/***************HTML5 音乐播放器 end***************/

设计了一个简单的 HTML5 音乐播放器，可以轻松地集成到WordPress 主题中。您还可以修改代码以匹配主题的样式。

转载请注明：汇站网 » WordPress 自定义域和 HTML5 的简单音乐播放器

赏

微信扫一扫

支付宝扫一扫

免责声明

本资源仅用于个人学习和研究使用，禁止用于任何商业环境！

1.  本网站名称：汇站网
2.  本站永久网址：https://www.huizhanii.com/
3.  本站所有资源来源于网友投稿和高价购买，所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习，本站不提供任何技术服务！
4.  本站所有资源的展示图片和信息不代表本站的立场！本站只是储蓄平台及搬运
5.  下载者禁止在服务器和虚拟机下进行搭建运营，本站所有资源不支持联网运行！只允许调试，参考和研究！！！！
6.  未经原版权作者许可,禁止用于任何商业环境，任何人不得擅作它用，下载者不得用于违反国家法律，否则发生的一切法律后果自行承担！
7.  为尊重作者版权，请在下载24小时内删除！请购买原版授权作品，支持你喜欢的作者，谢谢！
8.  若资源侵犯了您的合法权益，请持您的版权证书和相关原作品信息来信通知我们请来信     我们会及时删除，给您带来的不便，我们深表歉意！
9.  如下载链接失效、广告或者压缩包问题请联系站长处理！
10.  如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入！
11.  本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
12.  因源码具有可复制性，一经赞助，不得以任何形式退款。
13.  更多详情请点击查看

汇站网 WordPress教程 WordPress自定义域和HTML5的简单音乐播放器 https://www.huizhanii.com/15240.html