Skip to content

Instantly share code, notes, and snippets.

@maicong

maicong/1fa.html

Last active February 19, 2019 10:26
Show Gist options
  • Save maicong/664b4590ee4616e8fb14a0c92ecf16c6 to your computer and use it in GitHub Desktop.
Save maicong/664b4590ee4616e8fb14a0c92ecf16c6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1fa.html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>陈一发</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="陈一发儿最牛逼">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="陈一发">
<meta name="application-name" content="陈一发">
<link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="img/manifest.json">
<link rel="canonical" href="https://chenyifa.org/">
<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<style>
html {
font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Noto Sans", "Helvetica Neue", Helvetica,A rial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
text-size-adjust: 100%;
touch-action: manipulation;
height: 100%;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
-webkit-touch-callout: none;
-webkit-text-decoration-skip: objects;
-webkit-tap-highlight-color: transparent;
}
a:active,
a:hover {
outline: none;
}
.main {
width: 100%;
}
.loaded {
height: 100%;
}
.aplayer-body {
position: fixed!important;
z-index: 99;
left: 0;
right: 0;
bottom: 0;
padding-right: 25%;
background: #fff;
border-top: 1px solid #d09e77;
box-shadow: 0 -3px 5px 0 #e0e0e0;
}
.aplayer-pic {
width: 66px !important;
height: 66px !important;
}
.aplayer-music {
font-weight: bold;
text-align: center;
}
.aplayer-list-index {
display: inline-block;
width: 12px;
text-align: right;
}
.aplayer-author {
font-size: 14px !important;
}
.aplayer-icon-menu {
display: none !important;
}
.aplayer-info {
display: flex;
flex-direction: column;
justify-content: center;
height: 66px !important;
padding: 0 15px !important;
border-bottom: 0 !important;
}
.aplayer-lrc {
display: block !important;
position: absolute !important;
right: 0;
top: 0;
bottom: 0;
width: 25%;
height: 100% !important;
margin: auto !important;
overflow-x: hidden !important;
overflow-y: scroll !important;
border-left: 1px solid #d09e77;
box-shadow: inset 3px 3px 5px 0 #e0e0e0;
}
.aplayer-lrc-contents {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
height: 16px;
}
.aplayer-lrc-contents p {
padding: 0 10px !important;
}
.aplayer-lrc-current {
font-weight: bold;
}
.aplayer-lrc:before,
.aplayer-lrc:after {
height: 30px !important;
}
.aplayer-lrc p {
color: #b3682a !important;
}
.aplayer-played {
background: #f6ddcc !important;
}
.aplayer-thumb {
background: #da8e4b !important;
}
.copyright {
font-size: 12px;
text-align: center;
margin: 20px auto 10px;
color: #999;
}
.warning {
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<main id="main" class="main">
<div id="aplayer"></div>
<div id="loading" class="copyright warning">Loading...</div>
<div class="copyright">© 2019 Chenyifa.org</div>
</main>
<script src="https://cdn.bootcss.com/fetch/2.0.4/fetch.min.js"></script>
<script src="https://cdn.bootcss.com/classlist/1.2.20180112/classList.min.js"></script>
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.bootcss.com/mousetrap/1.6.2/mousetrap.min.js"></script>
<script src="https://w.cnzz.com/c.php?id=1276106502" async></script>
<script>
(async () => {
const json = (data, type) => {
try {
return window.JSON[type](data)
} catch (e) {
return data
}
}
const lsGet = (key) => {
if (!window.localStorage) return
return json(window.localStorage.getItem(key), 'parse')
}
const lsSet = (key, data) => {
if (!window.localStorage) return
return window.localStorage.setItem(key, json(data, 'stringify'))
}
const ids = [
'863848', '864426', '864427', '864428', '864429', '864431',
'864432', '864433', '864434', '864435', '864436', '864437',
'864439', '864440', '864441', '864442', '864443', '864444',
'864445', '864446', '864447', '864448', '864449', '864571',
'864572', '864573', '864610', '864611', '864612', '864613',
'864723', '864766', '864767', '864768', '864769', '864770',
'864771', '864772', '864773', '864774', '864775', '864873',
'864993', '864994', '864995', '865062', '865299', '865300',
'865509', '865510', '865511', '865512', '866381', '866382',
'866383', '866384', '866385', '866386', '867011', '867012',
'867013', '867014', '867015', '867016', '867017', '867020',
'867023', '867491', '867492', '867493', '867494', '867495',
'867496', '867497', '867498', '867499', '867500', '868399',
'868400', '868853', '868854', '868855', '868856', '868857',
'868858', '868859', '869235', '869236', '869238', '869239',
'869240', '869241', '869242', '872387', '879258'
]
const audios = lsGet('__audios') || []
const audioIndex = lsGet('__audioIndex') || 0
const mainEl = document.getElementById('main')
const apEl = document.getElementById('aplayer')
const loadEl = document.getElementById('loading')
window.$song_Lrc = []
if (!audios.length) {
for (var id of ids) {
const data = await window.fetch(
`https://api.mp3.jiuku.com/json/${id}.json`
).then(res => res.json())
const lrcScript = document.createElement('script')
lrcScript.src = `http://music.jiuku.com/ajax/lrc.php?id=${id}`
document.head.append(lrcScript)
loadEl.innerText = `正在加载歌曲信息 (${ids.indexOf(id) + 1}/${ids.length}) ${data.mname}`
audios.push(Object.assign({
name: data.mname,
artist: data.zjname,
url: data.wma.replace('http://', 'https://'),
cover: 'img/apple-icon-precomposed.png'
}, data))
}
audios.forEach(v => {
v.lrc = window.$song_Lrc[v.id]
})
lsSet('__audios', audios)
}
mainEl.classList.add('loaded')
loadEl.innerText = '低调使用，请勿广而告之'
const ap = new window.APlayer({
container: apEl,
audio: audios,
mini: false,
autoplay: true,
lrcType: 1,
loop: 'all',
listMaxHeight: 'initial'
})
const mousetrap = new window.Mousetrap()
const upLrc = index => {
const audio = ap.list.audios[index]
const lrcEl = document.querySelector('.aplayer-lrc-contents')
lrcEl.style = `transform:translateY(0)`
if (audio.lrc.substring(0, 1) !== '[') {
setTimeout(() => {
const newLrc = audio.lrc.replace('文本歌词[/]', '').replace(/<br\s?\/?>/g, '</p><p>')
lrcEl.innerHTML = `<p>（当前歌词无法自动滚动）</p><p>${newLrc}</p>`
}, 50)
}
}
if (audioIndex) {
ap.list.switch(audioIndex)
upLrc(audioIndex)
}
ap.on('canplay', () => {
ap.play()
})
ap.on('listswitch', ({ index }) => {
lsSet('__audioIndex', index)
upLrc(index)
})
mousetrap.bind('enter', () => {
ap.toggle()
})
mousetrap.bind(['up', 'left'], () => {
ap.skipBack()
})
mousetrap.bind(['down', 'right'], () => {
ap.skipForward()
})
window.console && window.console.log('© 2019 Chenyifa.org')
})()
</script>
</body>
</html>
<!-- 低调使用 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment