<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>圆形音乐播放器</title>
<style>
body {
display: flex;
justify
-content: center;
align
-items: center;
min
-height: 100vh;
margin: 0;
background
-color: #f4f4f4;
}
#player {
position: relative;
width: 400px;
height: 400px;
border
-radius: 50%;
overflow: hidden;
box
-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
#player img {
width: 100%;
height: 100%;
object
-fit: cover;
opacity: 0.8;
}
#controls {
position: absolute;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%);
display: flex;
flex
-direction: column;
align
-items: center;
justify
-content: center;
gap: 15px;
color: white;
text
-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}
#play
-pause {
background: transparent;
border: none;
font
-size: 48px;
cursor: pointer;
transition: all 0.3s;
width: 80px;
height: 80px;
display: flex;
align
-items: center;
justify
-content: center;
border
-radius: 50%;
background
-color: rgba(0, 0, 0, 0.3);
}
#play
-pause:hover {
background
-color: rgba(0, 0, 0, 0.5);
transform: scale(1.05);
}
#volume
-control {
-webkit
-appearance: none;
width: 160px;
height: 12px;
background: rgba(255, 255, 255, 0.3);
border
-radius: 6px;
cursor: pointer;
box
-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
#volume
-control::
-webkit
-slider
-thumb {
-webkit
-appearance: none;
width: 24px;
height: 24px;
border
-radius: 50%;
background: white;
box
-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
transition:
transform 0.3s;
}
#volume
-control::
-webkit
-slider
-thumb:hover {
transform: scale(1.2);
}
#info {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
text
-align: center;
color: white;
text
-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
font
-size: 18px;
}
#lyrics
-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: all 0.3s ease
-in
-out;
}
#lyrics
-toggle {
display: none;
}
#lyrics
-toggle
-label {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(
-50%);
color: white;
text
-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
cursor: pointer;
transition: all 0.3s;
font
-size: 20px;
z
-index: 2;
}
#lyrics {
height: 120px;
overflow
-y: scroll;
background
-color: rgba(0, 0, 0, 0.5);
color: white;
text
-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
font
-size: 16px;
padding: 15px 0;
scrollbar
-width: none;
display: flex;
flex
-direction: column;
align
-items: center;
transition: all 0.3s ease
-in
-out;
}
#lyrics::
-webkit
-scrollbar {
display: none;
}
#lyrics p {
margin: 6px 0;
transition: all 0.2s;
padding: 3px 15px;
border
-radius: 15px;
width: 80%;
text
-align: center;
}
#lyrics p:hover {
background
-color: rgba(255, 255, 255, 0.1);
transform: scale(1.02);
}
#lyrics
-toggle:checked ~ #lyrics {
height: 0;
padding: 0;
opacity: 0;
}
#lyrics
-toggle:checked ~ #lyrics
-toggle
-label i {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div id="player">
<audio id="audio
-player" src="陪你度过漫长岁月.mp3"></audio>
<img src="封面图片地址（需替换）" alt="封面图片">
<div id="controls">
<button id="play
-pause">▶</button>
<input type="range" min="0" max="1" step="0.01" value="0.5" id="volume
-control">
</div>
<div id="info">
<p><a href="#">陪你度过漫长岁月</a></p>
<p><a href="#">陈奕迅</a></p>
</div>
<div id="lyrics
-container">
<input type="checkbox" id="lyrics
-toggle">
<label for="lyrics
-toggle" id="lyrics
-toggle
-label">▼</label>
<div id="lyrics">
<p>陪你把沿路
感想 活出了答案</p>
<p>陪你把独自孤单 变成了勇敢</p>
<p>一次次失去 又重来 我没离开</p>
<p>陪伴是 最长情的告白</p>
<p></p>
<p>陪你把想念的酸 拥抱成温暖</p>
<p>陪你把彷徨 写出情节来</p>
<p>未来多漫长 再漫长 还有期待</p>
<p>陪伴你 一直到 故事给说完</p>
<p></p>
<p>让我们静静分享 此刻难得的坦白</p>
<p>只是无声地交谈 都感觉幸福 感觉不孤单</p>
<p></p>
<p>陪你把沿路
感想 活出了答案</p>
<p>陪你把独自孤单 变成了勇敢</p>
<p>一次次失去 又重来 我没离开</p>
<p>陪伴是 最长情的告白</p>
<p></p>
<p>陪你把想念的酸 拥抱成温暖</p>
<p>陪你把彷徨 写出情节来</p>
<p>未来多漫长 再漫长 还有期待</p>
<p>陪伴你 一直到 故事给说完</p>
<p></p>
<p>陪你把沿路
感想 活出了答案</p>
<p>陪你把独自孤单 变成了勇敢</p>
<p>一次次失去 又重来 我没离开</p>
<p>陪伴是 最长情的告白</p>
<p></p>
<p>陪你把想念的酸 拥抱成温暖</p>
<p>陪你把彷徨 写出情节来</p>
<p>未来多漫长 再漫长 还有期待</p>
<p>陪伴你 一直到 这世界说完</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const audio = document.getElementById('audio
-player');
const playPauseBtn = document.getElementById('play
-pause');
const volumeControl = document.getElementById('volume
-control');
function updateButtonState() {
if (audio.paused || audio.ended) {
playPauseBtn.textContent = '▶';
playPauseBtn.title = '播放';
} else {
playPauseBtn.textContent = '❚❚';
playPauseBtn.title = '暂停';
}
}
updateButtonState();
function playPause() {
if (audio.paused || audio.ended) {
audio.play();
updateButtonState();
} else {
audio.pause();
updateButtonState();
}
}
function setVolume() {
audio.volume = volumeControl.value;
}
audio.addEventListener('play', updateButtonState);
audio.addEventListener('pause', updateButtonState);
audio.addEventListener('ended', updateButtonState);
playPauseBtn.addEventListener('click', playPause);
volumeControl.addEventListener('input', setVolume);
});
</script>
</body>
</html> 帮我做暂停
和播放的功能 html 帮我插入歌曲，ch01项目中的audio项目中的陪你度过漫长岁月歌曲，完善音量调整功能
本文探讨了在实现JavaScript点击翻牌效果时遇到的Z-index与transform冲突问题，并介绍了解决方案——通过使用backface-visibility:hidden属性来规避这一问题。
扫一扫
4273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
