最新消息:愿得一人心,白首不分离。

Wordpress短标签整合音乐播放器APlayer和视频播放器DPlayer

学习笔记 轮回的落日℡ 63浏览 0评论

WordPress

前言

最近想给站内的一些音乐教程或者视频教程附上在线演示的功能,但是本站使用的主题未曾自带,但是又不想没有视频的页面都加载不必要的js和css文件影响网页打开速度,也不想写入数据库带来,所以只能自己手工修改了。代码粗糙,高手勿笑。

一、添加音乐播放器APlayer

在主题function.php文件最后加入以下代码,具体需要哪里功能参数调用,请查阅官方文档。

Ⅰ 添加音乐播放器APlayer实现单曲播放

以下修改适合在文章内容中实现单首歌曲。

//APlayer音乐播放器
function e_music($atts, $content=null){ extract(shortcode_atts(array('name'=>null,'url'=>null,'artist'=>null), $atts));
if(is_null( $artist )){
    $artist="轮回阁";
}
if ( !is_null( $name ) && !is_null( $url ) && !is_feed() ){
 return '
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
 <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
 <div id="aplayer"></div>
 <script>    
    const ap = new APlayer({
    container: document.getElementById("aplayer"),
        mini: false,
        autoplay: false,
        theme: "#FADFA3",
        loop: "all",
        order: "random",
        preload: "auto",
        volume: 0.7,
        mutex: true,
        listFolded: false,
        listMaxHeight: 90,
        lrcType: 3,
        audio: [{
            name: "'.$name.'",
            artist: "'.$artist.'",
            url: "'.$url.'",
        }]
});
</script>';
 }
else{
 return '';
 }
} 
add_shortcode('music','e_music');

Wordpress短标签调用音乐播放器APlayer实现单曲播放方法:

【music name="歌曲名称" url="歌曲地址" artist="歌手"】【/music】

调用时把上面中文括号改为英文括号【】→[],其中标签中歌曲名称name参数和歌曲地址url参数为必填项,当歌手为空时默认轮回阁,按实际自行修改。

Ⅱ 添加音乐播放器APlayer实现多曲播放

以下修改适合在文章内容中实现多曲首歌曲播放。这段真不好拿出手,就是我自己瞎想出来的。
为了实现调用,我将实现APlayer的代码分成三段,头部固定 + 尾部固定 + 中间配置循环,代码如下:有其他方法可以实现的朋友请不吝赐教!

//音乐播放器头部
function music_head(){
 return '
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
 <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
 <div id="aplayer"></div>
 <script>    
    const ap = new APlayer({
    container: document.getElementById("aplayer"),
        mini: false,
        autoplay: false,
        theme: "#FADFA3",
        loop: "all",
        order: "list",
        preload: "auto",
        volume: 0.7,
        mutex: true,
        listFolded: false,
        listMaxHeight: 90,
        lrcType: 3,
        audio: [';   
}
add_shortcode('Splayer','music_head');

//音乐播放器尾部
function music_footer(){
 return '
]
});
</script>';
}
add_shortcode('Eplayer','music_footer');

//音乐播放器中间MP3信息
function e_mp3($atts, $content=null){ extract(shortcode_atts(array('name'=>null,'url'=>null,'artist'=>null), $atts));
if(is_null( $artist )){
    $artist="轮回阁";
}
if ( !is_null( $name ) && !is_null( $url ) && !is_feed() ){
 return '
        {
            name: "'.$name.'",
            artist: "'.$artist.'",
            url: "'.$url.'",
        },';
 }
else{
 return '';
 }
} 
add_shortcode('mp3','e_mp3');

Wordpress短标签调用音乐播放器APlayer方法:

【Splayer】【mp3 name="歌曲名称" url="歌曲地址" artist="歌手"】【mp3 name="歌曲名称2" url="歌曲地址2" artist="歌手2"】【Eplayer】

调用时把上面中文括号改为英文括号【】→[],其中标签中歌曲名称name参数和歌曲地址url参数为必填项,当歌手为空时默认轮回阁,按实际自行修改。

Ⅲ 通过API接口调用网易云音乐或者QQ音乐

因为要用到网易云音乐API接口,基于接口的不稳定性,此部分代码暂时不放出,仅作为自己学习记录!

Ⅳ 音乐播放器Aplayer项目信息

官方文档:

https://aplayer.js.org

Github

https://github.com/MoePlayer/APlayer

轮回阁引用实例:

https://www.chenbo.info/1400.html

二、添加视频播放器DPlayer

以下修改适合在文章内容中实现视频播放,支持MP4、MOV、M3U8等格式,具体功能使用根椐实际需求参考下边的官方文档进行修改。
在主题function.php文件最后加入以下代码。

//视频播放器头部
function dplayer_head(){
 return '
<link href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
';   
}
add_shortcode('dplayer','dplayer_head');

//视频播放器
function video_dplayer($atts, $content=null){ extract(shortcode_atts(array('id'=>null,'url'=>null,'pic'=>null), $atts));
if ( !is_null( $url ) && !is_feed() ){
 return '
<div id="dplayer'.$id.'"></div>
<script>
const dp = new DPlayer({
    container: document.getElementById("dplayer'.$id.'"),
    logo: "https://www.chenbo.info/wp-content/themes/D8/img/logo.png",
    theme: "#'.randColor().'",
    mutex: true,
    screenshot: false,
     contextmenu: [
        {
            text: "轮回阁",
            link: "https://www.chenbo.info",
        },
        {
            text: "custom2",
            click: (player) => {
                console.log(player);
            },
        },
    ],
    video: {
        url: "'.$url.'",
        pic: "'.$pic.'",
    }
});
</script>
';
 }
else{
 return '';
 }
} 
add_shortcode('video','video_dplayer');

Wordpress短标签调用视频播放器DPlayer方法(同一页面单视频):

【dplayer】【video url="视频地址" pic="视频封面"】

调用时把上面中文括号改为英文括号【】→[],短标签中视频地址url参数为必填项。

Wordpress短标签调用视频播放器DPlayer方法(同一页面多视频):

【dplayer】【video id="1" url="视频地址" pic="视频封面"】【video id="2" url="视频地址" pic="视频封面"】【video id="3" url="视频地址" pic="视频封面"】

调用时把上面中文括号改为英文括号【】→[],短标签中视频地址url参数及id数为必填项。

视频播放器DPlayer项目信息

官方文档:

https://dplayer.js.org/

Github:

https://github.com/MoePlayer/DPlayer

轮回阁引用实例:

https://www.chenbo.info/about

三、补充两个自动添加歌曲对应的封面图片函数及实现自动随机顔色函数

Ⅰ 自动添加歌曲对应的封面图片函数

通过歌曲名自动查找豆瓣的曲库信息,调用对应歌曲的封面图片

//通过关键词从豆瓣获取专辑封面链接 调用getcover($words)
function getcover($words){
            $arg = http_build_query(array('q' => $words,'count'=> 1 ));
            $url = false;
            $g = file_get_contents('https://api.douban.com/v2/music/search?'.$arg);
            if ($g){
                $g = json_decode($g,true);
                if($g['count']){
                    $url = $g['musics'][0]['image'];
                    //换成大图
                    $url = str_replace("/spic/", "/mpic/", $url);
                }
            }
            return $url;
}

Ⅱ 自动随机顔色函数

//随机顔色 调用randColor()
function randColor(){
    $colors = array();
    for($i = 0;$i<6;$i++){
        $colors[] = dechex(rand(0,15));
    }
    return implode('',$colors);
}
整合音乐播放器APlayer和视频播放器DPlayer修改代码下载
其他相关事项

因为太多的朋友咨询代码问题,特整理一个文件,将本文中用到的代码全部代码打包。
再将短标签配合以下这篇文章的自定义标签使用,简直不要太爽。

  1. Wordpress文本编辑器增加pre等自定义标签及编辑器自定义标签插件

特别说明:在编辑器文本模式下写文章时,添加多视频的时候t各集之间的[]短标签之间必须在相连,不能换行。

转载请注明:轮回阁 » Wordpress短标签整合音乐播放器APlayer和视频播放器DPlayer

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址