极简音乐播放器–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(']')

 

— 于 ，共写了4823个字；
— 文内使用到的标签：
emin.ink

2条回应：“极简音乐播放器–Emin.ink开发笔记”

  1. 匿名说道：
    2018年12月5日 下午11:18

    it之家网友到此一游

    回复

发表评论

电子邮件地址不会被公开。