本文最后更新于天前,内容可能已不再适用!

本篇文章教大家如何给自己的网页添加一个音乐播放器。

新版方法

在 head 标签引入以下文件

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

在 body 合适的地方插入以下内容

<!--此处为示例--->
<meting-js
	server="netease"
	type="playlist"
	id="60198">
</meting-js>

选项

optiondefaultdescription
id必须歌曲 id/歌单 id/专辑 id/搜索关键词
server必须音乐平台:netease,tencent,kugou,xiami,baidu
type必须song,playlist,album,search,artist
autooptions音乐链接, 支持以下平台:netease,tencent,xiami
fixedfalse开启吸底模式,详情
minifalse开启迷你模式,详情
autoplayfalse音频自动播放
theme#2980b9主题色
loopall音频循环播放, 可选值: ‘all’, ‘one’, ‘none’
orderlist音频循环顺序, 可选值: ‘list’, ‘random’
preloadauto预加载,可选值: ‘none’, ‘metadata’, ‘auto’
volume0.7默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
mutextrue互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
lrc-type0详情
list-foldedfalse列表默认折叠
list-max-height340px列表最大高度
storage-namemetingjs存储播放器设置的 localStorage key

旧版方法(不稳定)

在 head 标签引入 css 样式文件

<link rel="stylesheet" href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css">

在 body 标签内加入 div 标签并引入 js 文件

<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>

加载播放器

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,//开启吸底模式
    autoplay: true,//自动播放
    lrcType: 1,//歌词加载方式
    audio: audioArr,//歌曲列表
});
//更多详细参数请前往https://aplayer.js.org/#/zh-Hans/查看

引入 autoPlay.js 自动加载网易云音乐(可选,需 jQuery 支持)

try {
    $.ajax({url: "https://cdn.bootcss.com/bluebird/3.5.5/bluebird.min.js", dataType:"script", cache: true,   success: function() {
        $.ajax({url: "https://cdn.bootcss.com/fetch/2.0.4/fetch.min.js", dataType:"script", cache: true, success: function() {
            function fetch163Playlist(playlist_id) {
                return new Promise(function (ok, err) {
                    fetch("https://v1.hitokoto.cn/nm/playlist/" + playlist_id)
                    .then(function (response) {
                        return response.json();
                    })
                    .then(function (data) {
                        var arr = [];
                        data.playlist.tracks.map(function (value) {
                            arr.push(value.id);
                        });
                        return arr;
                    })
                    .then(function (ids) {
                        return fetch163Songs(ids);
                    })
                    .then(function (data) {
                        ok(data);
                    })
                    .catch(function (e) {
                        err(e);
                    });
                })
            }
            function fetch163Songs(IDS) {
                return new Promise(function (ok, err) {
                    var ids;
                    switch (typeof IDS) {
                        case 'number':
                            ids = [IDS];
                            break;
                        case 'object':
                            if (!Array.isArray(IDS)) {
                                err(new Error("Please enter array or number"));
                            }
                            ids = IDS;
                            break;
                        default:
                            err(new Error("Please enter array or number"));
                            break;
                    }
                    fetch("https://v1.hitokoto.cn/nm/summary/" + ids.join(",") + "?lyric=true&common=true")
                        .then(function (response) {
                        return response.json();
                    })
                        .then(function (data) {
                        var songs = [];
                        data.songs.map(function (song) {
                            songs.push({
                                name: song.name,
                                url: song.url,
                                artist: song.artists.join("/"),
                                album: song.album.name,
                                pic: song.album.picture,
                                lrc: song.lyric
                            });
                        });
                        return songs;
                    })
                        .then(function (result) {
                        ok(result);
                    })
                        .catch(function (e) {
                        err(e);
                    });
                });
            }
            /****加载多个网易云音乐单曲****/
            fetch163Songs(songArr)//此处"songArr"为网易云音乐id数组
                .then(function (data) {
                let audioArr=[];
                for(let i=0;i<data.length;i++){
                    audioArr.push({'name':data[i].name,'artist':data[i].artist,'url':data[i].url,'cover':data[i].pic,'lrc':data[i].lrc.base});
                }
                const ap = new APlayer({
                    container: document.getElementById('aplayer'),
                    fixed: true,
                    autoplay: true,
                    lrcType: 1,
                    audio: audioArr,
                });
            })
                .catch(function (err) {
                console.error('网易云音乐获取失败!'+err);
            })
            /****加载网易云音乐歌单****/
            fetch163Playlist(listId)//此处"listId"为网易云音乐歌单id
                .then(function (data) {
                let audioArr=[];
                for(let i=0;i<data.length;i++){
                    audioArr.push({'name':data[i].name,'artist':data[i].artist,'url':data[i].url,'cover':data[i].pic,'lrc':data[i].lrc.base});
                }
                const ap = new APlayer({
                    container: document.getElementById('aplayer'),
                    fixed: true,
                    autoplay: true,
                    lrcType: 1,
                    audio: audioArr,
                });
            })
                .catch(function (err) {
                console.error('网易云音乐获取失败!'+err);
            })
        }});
    }});
} catch(err) { console.log("[Error]"+err) }

说明

最后修改:2020-10-28 21:00:58
如果觉得我的文章对你有用,请随意赞赏