代码的作者是小红书的Oxsfbca89ab老师（这名字是乱码么）
音乐插入的代码测试
⭐️能播放说明源文件没有损坏⭐️音频文件的托管
原本是想把文件托管在公用服务器的，但是怕资源挂，而且是很容易被ban于是准备拿自己的网站域名作为一个仓库，只要不放大量的音频资源，几兆的文件还是吃得消的（但是目前本站的文章数量在本地构建的时候已经有点慢了，之前考虑转hugo但是易用程度和hexo不能比，当然最主要是我不懂go语言）
其实还是有版权风险，但是只放一两首应该没事
必须把文件上传，让它有一个固定、公开的域名，后边才能用url指认。托管网站上传后会给链接，自己的网站or博客上传之后，直接在博客的域名后边加 / 指认到后台资源的目录。
MP3文件的准备
假如是在音乐播放器下载音乐，下载下来都是加密过的特殊格式。前往网站：sleepno.cn
可以免费把加密的文件转换为MP3，无使用次数限制，适用网易云/酷狗/QQ音乐/喜马拉雅。
将链接插入AO3
添加workskin代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| #workskin .bgm-player-container {
margin: 0 auto 3em;
height: 100px;
width: 100%;
}
#workskin .bgm-player-wrapper {
padding: 0.1em 1em 1em 1em;
background: linear-gradient(135deg, #ebebeb 0%, #cecece 100%);
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
text-align: center;
box-sizing: border-box;
}
#workskin .bgm-player-wrapper small {
color: #000000;
margin: 0;
font-size: 1em;
font-weight: 500;
display: block;
}
#workskin .bgm-player-wrapper audio {
display: block;
width: 100%;
height: 40px;
border-radius: 8px;
margin: 0 auto;
}
|
放入文章内部的html代码
记得转到html编辑器再复制，不要在rich text编辑器复制，代码可能会被自动转换，加一些有的没的
单次播放不循环
1
2
3
4
5
6
7
8
9
10
11
| <div class="workskin">
<div class="bgm-player-container">
<div class="bgm-player-wrapper">
<small>歌曲名 - 艺术家名</small>
<audio controls>
<source src="你的歌曲链接" type="audio/mpeg">
</audio>
</div>
</div>
</div>
|
循环播放
1
2
3
4
5
6
7
8
9
10
11
| <div class="workskin">
<div class="bgm-player-container">
<div class="bgm-player-wrapper">
<small>歌曲名 - 艺术家名</small>
<audio controls loop>
<source src="你的歌曲链接" type="audio/mpeg">
</audio>
</div>
</div>
</div>
|
因为是html 的页面插入并且ao3没有把“一键回到顶部/底部”的按钮做成侧边浮动按钮，所以如果文章特别长，把播放器插入在文章开头并不是一个好的选择，一首歌反复放真的头疼
