526互联

博客园音乐

发布时间 2024-01-05 10:46:22作者: hisensei

一、网页内嵌音乐

如何在 markdown 中添加音频

转载来源：https://zhuanlan.zhihu.com/p/301744339

二、博客全局音乐

转载来源：https://echeverra.cn/aplayer

博客园页脚 HTML 代码中添加代码

单曲引入

<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>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
 
 <!-- 注意看参数 -->
<meting-js server="netease" type="song" id="28524850" fixed="true"></meting-js>

<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>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
 
<meting-js 
    server="netease" 
    type="playlist" 
    id="7360465359"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="none"
    list-folded="false">
</meting-js>

<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>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<div id='aplayer'></div>

<script>
    var ap = new APlayer
    ({
        element: document.getElementById('aplayer'),
        showlrc: false,
        fixed: true,
        mini: true,
        audio: {
            title: '半岛铁盒',
            author: '周杰伦',
            url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',
            pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png',
            
        }
    });
    ap.init();
</script>