三月梅开
发表于 2025-5-11 20:39
三月梅开
发表于 2025-5-11 20:40
<!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>
.dz-player-container {
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
width: 280px;
margin: 10px auto;
color: white;
font-family: 'Arial', sans-serif;
box-sizing: border-box;
}
.dz-album-art {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid white;
margin: 0 auto 15px;
animation: dz-rotate 20s linear infinite;
animation-play-state: paused;
}
.dz-player-container.playing .dz-album-art {
animation-play-state: running;
}
@keyframes dz-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.dz-song-info {
margin-bottom: 15px;
}
.dz-song-title {
font-size: 18px;
margin: 0 0 5px;
font-weight: bold;
}
.dz-artist {
font-size: 14px;
color: #ccc;
margin: 0;
}
.dz-controls {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.dz-btn {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
margin: 0 10px;
outline: none;
padding: 5px;
line-height: 1;
}
.dz-play-btn {
font-size: 30px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.dz-progress-container {
background: #555;
height: 4px;
border-radius: 4px;
margin-bottom: 15px;
cursor: pointer;
}
.dz-progress {
background: #1db954;
height: 100%;
border-radius: 4px;
width: 0%;
transition: width 0.1s linear;
}
.dz-time-info {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #ccc;
margin-bottom: 10px;
}
.dz-change-image {
background: #1db954;
color: white;
border: none;
padding: 6px 12px;
border-radius: 15px;
cursor: pointer;
font-size: 12px;
margin-top: 8px;
display: inline-block;
}
.dz-file-input {
display: none;
}
</style>
</head>
<body>
<div class="dz-player-container">
<img id="dzAlbumArt" src="https://picsum.photos/200/200" class="dz-album-art" alt="专辑封面">
<div class="dz-song-info">
<h2 class="dz-song-title">示例歌曲</h2>
<p class="dz-artist">示例歌手</p>
</div>
<div class="dz-progress-container" id="dzProgressContainer">
<div class="dz-progress" id="dzProgress"></div>
</div>
<div class="dz-time-info">
<span id="dzCurrentTime">0:00</span>
<span id="dzDuration">3:45</span>
</div>
<div class="dz-controls">
<button class="dz-btn dz-prev-btn">❮</button>
<button class="dz-btn dz-play-btn">▶</button>
<button class="dz-btn dz-next-btn">❯</button>
</div>
<label for="dzImageUpload" class="dz-change-image">更换封面</label>
<input type="file" id="dzImageUpload" class="dz-file-input" accept="image/*">
<audio id="dzAudio" src="https://cccimg.com/view.php/517d63d8854499e0d52166347a74dd9d.mp3"></audio>
</div>
<script>
// <![CDATA[
const audio = document.getElementById('dzAudio');
const albumArt = document.getElementById('dzAlbumArt');
const playBtn = document.querySelector('.dz-play-btn');
const prevBtn = document.querySelector('.dz-prev-btn');
const nextBtn = document.querySelector('.dz-next-btn');
const progress = document.getElementById('dzProgress');
const progressContainer = document.getElementById('dzProgressContainer');
const currentTimeEl = document.getElementById('dzCurrentTime');
const durationEl = document.getElementById('dzDuration');
const playerContainer = document.querySelector('.dz-player-container');
const imageUpload = document.getElementById('dzImageUpload');
// 歌曲信息
const songs = [
{
title: '懂你',
artist: '满文军',
audioSrc: 'https://cccimg.com/view.php/517d63d8854499e0d52166347a74dd9d.mp3',
imageSrc: 'https://picsum.photos/200/200?random=1'
},
{
title: '母亲',
artist: '阎维文',
audioSrc: 'https://cccimg.com/view.php/8d0ef0c9400fa68f86d35ffa9d8ca8f0.mp3',
imageSrc: 'https://picsum.photos/200/200?random=2'
},
{
title: '初夏的味道',
artist: '海艺',
audioSrc: 'https://cccimg.com/view.php/6a3af0dac6814a48e6b0b6cdb11e3429.mp3',
imageSrc: 'https://picsum.photos/200/200?random=3'
}
];
let currentSongIndex = 0;
// 加载歌曲
function loadSong(song) {
document.querySelector('.dz-song-title').textContent = song.title;
document.querySelector('.dz-artist').textContent = song.artist;
albumArt.src = song.imageSrc;
audio.src = song.audioSrc;
}
// 播放歌曲
function playSong() {
playerContainer.classList.add('playing');
playBtn.innerHTML = '❚❚';
audio.play();
}
// 暂停歌曲
function pauseSong() {
playerContainer.classList.remove('playing');
playBtn.innerHTML = '▶';
audio.pause();
}
// 上一首
function prevSong() {
currentSongIndex--;
if (currentSongIndex < 0) {
currentSongIndex = songs.length - 1;
}
loadSong(songs);
playSong();
}
// 下一首
function nextSong() {
currentSongIndex++;
if (currentSongIndex > songs.length - 1) {
currentSongIndex = 0;
}
loadSong(songs);
playSong();
}
// 更新进度条
function updateProgress(e) {
const { duration, currentTime } = e.srcElement;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = progressPercent + '%';
// 更新时间显示
const durationMinutes = Math.floor(duration / 60);
let durationSeconds = Math.floor(duration % 60);
if (durationSeconds < 10) {
durationSeconds = '0' + durationSeconds;
}
if (duration) {
durationEl.textContent = durationMinutes + ':' + durationSeconds;
}
const currentMinutes = Math.floor(currentTime / 60);
let currentSeconds = Math.floor(currentTime % 60);
if (currentSeconds < 10) {
currentSeconds = '0' + currentSeconds;
}
currentTimeEl.textContent = currentMinutes + ':' + currentSeconds;
}
// 设置进度条
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}
// 更换封面图片
function changeImage(e) {
const file = e.target.files;
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
albumArt.src = event.target.result;
};
reader.readAsDataURL(file);
}
}
// 事件监听
playBtn.addEventListener('click', function() {
const isPlaying = playerContainer.classList.contains('playing');
if (isPlaying) {
pauseSong();
} else {
playSong();
}
});
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
audio.addEventListener('timeupdate', updateProgress);
audio.addEventListener('ended', nextSong);
progressContainer.addEventListener('click', setProgress);
imageUpload.addEventListener('change', changeImage);
// 初始化加载第一首歌
loadSong(songs);
// ]]>
</script>
</body>
</html>
找了3首歌，在播放器上能显示一下才好选择，先这样吧
三月梅开
发表于 2025-5-11 22:25
总算好像是可以了;P
三月梅开
发表于 2025-5-11 23:29
三月梅开
发表于 2025-5-11 23:33
与文字对坐
铅字在视网膜上开花时
任由笔画织就的绸缎裹住灵魂，
在字里行间打捞月光和星光的碎屑
四月的风刚卷走花瓣热
浪便推着蛙鸣漫过田野
灯下飞虫撞碎光晕
自媒体的泡沫文字
如潮水般涌来裹挟着焦虑与不安
三月梅开
发表于 2025-5-12 01:01
在喧嚣中
筑起一座墨色的城堡
用思想的砖石垒砌高墙
不让那些浮华的辞藻 轻易叩响心门
当文字试图用夸张的色彩 涂抹我的世界
我握紧自己的标尺在文字的迷宫里
走出独属自己的轨迹
让内心的灯塔 始终明亮，不为所动
三月梅开
发表于 2025-5-12 01:07
三月梅开
发表于 2025-5-12 01:16
每个人对时髦的观点不一样。我就选自己喜欢的，有点挑战性的，需要动一点小脑筋就能完成的，这样会让我有成就感还很愉悦。惊艳的东西是自己认为觉得出类拔萃，呵呵，我是做不到时髦，年轻人这么多，我们能知道的连皮毛都算不上，太折腾就让我觉得有些妖了，就像非要浓妆艳抹的出去拍照片，手机加了那么多滤镜，视频也是滤镜加持，出来的东西不真实了。但都不是真理。自己喜欢就是正解。我不喜欢可能是收摄影的影响，但也不是就是对的，只是我喜欢的。
三月梅开
发表于 2025-5-12 01:24
就像所谓的写诗，我写来写去，基本都是顺口溜，都不可能出来有语出惊人的效果，因为我就没那样的大脑。现在就是打字玩而已。拒绝参加什么直播，没那么多精力折腾了，也还是觉得没必要。有合适的人说说话，没有聊得来的就自己找点事情做，别有惰性，也别挑剔，看别人不顺眼是自己的修养不够。我也不懂什么修身养性的道理，就觉得没能力去实现想要的财富自由，行动自由，那就在自己有限的范围内享受生活。
三月梅开
发表于 2025-5-12 01:35