极简音乐播放器–Emin.ink开发笔记
最近想在博客上放点音乐,决定在首页放置后,找寻到了这个自己觉得好看的播放器。来源:APlayer
所需用到的两个文件:
APlayer.min.css || APlayer.min.js
写入head中
<link rel="stylesheet" href="APlayer.min.css">
<script src="APlayer.min.js"></script>
选择放置的位置
<div id="aplayer"></div>
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg'
}]
});
</script>
播放模式:
当有多个音频时会 APlayer 会展示一个播放列表,listFolded
参数指明列表是否默认折叠,listMaxHeight
参数指明列表最大高度。
<script>
const ap = new APlayer({
container: document.getElementById('player'),
listFolded: false,
listMaxHeight: '90px',
lrcType: 3,
audio: [
{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg',
lrc: 'lrc1.lrc',
theme: '#ebd0c2'
},
{
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg',
lrc: 'lrc2.lrc',
theme: '#46718b'
}
]
});
</script>
吸底模式
APlayer 可以通过吸底模式固定在页面底部,这种模式跟普通模式有很大不同。
<script>
const ap = new APlayer({
container: document.getElementById('player'),
fixed: true,
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});
</script>
迷你模式
如果你没有足够空间来放置正常模式的播放器,那么你可以考虑使用迷你模式。
请注意迷你模式与吸底模式冲突。
<script>
const ap = new APlayer({
container: document.getElementById('player'),
mini: true,
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});
</script>
根据封面自适应主题色
需要额外加载 color-thief.js
<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script src="color-thief.js"></script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
theme: '#e9e9e9',
audio: [{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg'
}, {
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg'
}]
});
const colorThief = new ColorThief();
const setTheme = (index) => {
if (!ap.list.audios[index].theme) {
colorThief.getColorAsync(ap.list.audios[index].cover, function (color) {
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
};
setTheme(ap.list.index);
ap.on('listswitch', (index) => {
setTheme(index);
});
常见问题
为什么播放器不能在手机上自动播放?
大多数移动端浏览器禁止了音频自动播放。
PS*
如果你想另写歌单来放置歌曲,可使用如下方法(吸底模式)
head中添加
<script src="/js/music.js"></script>
<div id="aplayer"></div>
<script>
var playerInfo = {
container: document.getElementById('aplayer'),
fixed: true,
audio:
music
}
const ap = new APlayer(playerInfo);
</script>
music.js中的格式:
music = [
{'name': '新写的旧歌', 'artist': '李宗盛', 'url': 'https://emin.ink/music/songs/李宗盛 - 新写的旧歌.mp3', 'cover': 'https://emin.ink/music/cover/m1.jpg'},
{'name': '无条件', 'artist': '陈奕迅', 'url': 'https://emin.ink/music/songs/陈奕迅 - 无条件.mp3', 'cover': 'https://emin.ink/music/cover/m2.jpg'},
{'name': '男孩', 'artist': '梁博-希林娜依·高', 'url': 'https://emin.ink/newcu/music/songs/男孩 (Live).mp3', 'cover': 'https://emin.ink/music/cover/m3.jpg'},
{'name': '缺口', 'artist': '庾澄庆', 'url': 'https://emin.ink/music/songs/缺口.mp3', 'cover': 'https://emin.ink/music/cover/m4.jpg'},
{'name': '遗憾', 'artist': '李代沫', 'url': 'https://emin.ink/music/songs/遗憾.mp3', 'cover': 'https://emin.ink/music/cover/m5.jpg'},
{'name': '路', 'artist': '范玮琪', 'url': 'https://emin.ink/music/songs/路.mp3', 'cover': 'https://emin.ink/music/cover/m6.png'},
{'name': '动物世界', 'artist': '薛之谦', 'url': 'https://emin.ink/music/songs/动物世界.mp3', 'cover': 'https://emin.ink/music/cover/m7.jpg'},
{'name': '今天等我来', 'artist': '陈奕迅', 'url': 'https://emin.ink/music/songs/今天等我来 (Live).mp3', 'cover': 'https://emin.ink/music/cover/m8.jpg'},
{'name': 'Tears And Rain', 'artist': 'James Blunt', 'url': 'https://emin.ink/music/songs/tears and rain.aac', 'cover': 'https://emin.ink/music/cover/m9.jpg'},
{'name': '千千阙歌', 'artist': '陈慧娴', 'url': 'https://emin.ink/music/songs/千千阙歌.aac', 'cover': 'https://emin.ink/music/cover/m10.jpg'},
]
爬取网易云歌单,复制导入
如果觉得一行行添加歌曲会很麻烦,我的舍友给我提供了爬取歌单的办法,如果歌单本身是灰色的版权严重的歌曲,播放会出现404
import requests
import re
from bs4 import BeautifulSoup
import time
base_url = '歌单URL,如:https://music.163.com/playlist?id=2246544491'
headers = {
'Referer': 'http://music.163.com/',
'Host': 'music.163.com',
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36',
'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'
}
with open('test.js', 'w', encoding='utf-8') as f:
f.write('music = [' + '\n')
info = {}
se = requests.session()
se = BeautifulSoup(se.get(base_url, headers=headers).content, 'lxml')
main = se.find('ul', {'class': 'f-hide'})
for music in main.find_all('a'):
id = re.search('[0-9]+', music['href'])
suburl = 'https://music.163.com' + music['href']
html = requests.get(suburl, headers=headers).text
soup = BeautifulSoup(html, 'lxml')
cover = soup.find('img')['src']
artist = soup.find_all('a', {'class': 's-fc7'})[1].text
info['name'] = music.text
info['artist'] = artist
info['url'] = 'http://music.163.com/song/media/outer/url?id=' + id.group() + '.mp3'
info['cover'] = cover
print(info['name'])
print(info['artist'])
print(info['url'])
print(info['cover'])
print('------------------------------------------------------------------------------------------------------')
time.sleep(2)
with open('test.js', 'a', encoding='utf-8') as f:
f.write(str(info) + ',\n')
with open('test.js', 'a', encoding='utf-8') as f:
f.write(']')
it之家网友到此一游
多谢家友 ヾ(◍°∇°◍)ノ゙