#1396 ★
最近一直在循环
★
陈粒
未收录的单曲
00:00
00:00
.audio-card {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
width: 87%;
height: auto;
margin: 15px auto 25px;
border-radius: 6px;
box-shadow: 0 0 10px transparent;
}
.audio-card .background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: 6px;
box-shadow: 0 0 10px transparent;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0.25;
}
.name-nd-control-nd-bar {
flex: 1;
display: flex;
height: 100%;
margin-left: 10px;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
overflow: hidden;
}
.player-album-cover {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
}
.player-album-cover img {
width: 100px;
height: 100px;
border-radius: 6px;
margin: 0;
object-fit: cover;
}
.name-nd-control {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: 100%;
}
.audio-controls {
flex: 0 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0;
margin-left: 10px;
min-width: 80px;
}
.song-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
overflow: hidden;
max-width: calc(100% - 90px);
}
.song-name-container,
.song-sub-info {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.song-name {
font: 700 0.9em / 1.5 -apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,Arial,sans-serif;
padding: 0;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.song-sub-info {
font-size: smaller;
padding: 0;
line-height: 1;
margin-top: 0;
}
.artist-name {
font: 400 0.75em/1.5 Microsoft JhengHei, monospace;
}
.aka-info {
margin-bottom: 0;
font-size: smaller;
}
.album-name {
margin-bottom: 5px;
font: 500 0.8em/1.5 Microsoft JhengHei, monospace;
font-style: italic;
}
.progress-container {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 5px;
}
.progressBar {
flex-grow: 1;
margin: 0 10px;
height: 4px;
border: none;
-webkit-appearance: none;
appearance: none;
background: var(--border-color);
border-radius: 2px;
}
.progressBar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--theme-color);
cursor: pointer;
}
.progressBar::-moz-range-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--theme-color);
cursor: pointer;
border: none;
}
.timeDisplay {
font: 400 0.66em/1.5 "Microsoft JhengHei", monospace;
color: var(--text-secondary);
flex: 0 0 auto;
min-width: 35px;
}
input[type="range"] {
width: 100%;
}
.playPauseButton,
.loopButton {
background: transparent;
border: none;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.audio-control-icon {
color: var(--text-primary);
width: 20px;
height: 20px;
}
document.addEventListener('DOMContentLoaded', function () {
var audioUrls = "https:\/\/cdn.imzh.me\/m4a\/2025\/10\/03a5c152e6edfa95262e48c3459facf3.m4a".split(", ");
var audioPlayer = document.getElementById('audio-1396');
var playPauseButton = document.getElementById('playPauseButton-audio-1396');
var playIcon = playPauseButton.querySelector('#playIcon');
var pauseIcon = playPauseButton.querySelector('#pauseIcon');
var loopButton = document.getElementById('loopButton-audio-1396');
var loopOffIcon = loopButton.querySelector('#loopOffIcon');
var loopOnIcon = loopButton.querySelector('#loopOnIcon');
var startTimeElement = document.getElementById('startTime-audio-1396');
var endTimeElement = document.getElementById('endTime-audio-1396');
var progressBar = document.getElementById('progressBar-audio-1396');
var audioElements = Array.from(document.getElementsByTagName('audio'));
var seekTime = 10;
playPauseButton.onclick = function () {
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: '★',
artist: '陈粒',
album: '未收录的单曲',
artwork: [
{ src: 'https:\/\/cdn.imzh.me\/webp\/2025\/10\/1b144eb0f19e4c326f25368620ccfa6a.webp', sizes: '512x512' }
]
});
navigator.mediaSession.setActionHandler('play', function() { audioPlayer.play(); });
navigator.mediaSession.setActionHandler('pause', function() { audioPlayer.pause(); });
navigator.mediaSession.setActionHandler('seekbackward', function() { audioPlayer.currentTime -= seekTime; });
navigator.mediaSession.setActionHandler('seekforward', function() { audioPlayer.currentTime += seekTime; });
}
if (audioPlayer.paused) {
for (var i = 0; i