Profile Image of the Author
hangdn
删繁就简，向心而行
公告
欢迎来到我的博客！如果自己的才华还撑不起梦想时，就应该静下来学习；如果自己的能力还驾驭不了目标时，就应该沉下心来历练；那些成长的磨砺、奋斗的汗水，都将化作你的底气和格局，累积成你向上攀爬的阶梯，支撑着你看到更高处的风景。
近期更新
3837 字
19 分钟

博客模版，示例

2025-11-10
经典收藏
示例
/
博客指南
浏览量 加载中...

1.嵌入单曲：

2.嵌入歌单

页面标题#

这里是Markdown内容，可以正常使用加粗、斜体、链接等语法。

二级标题#

Markdown列表：

  • 项目1
  • 项目2
  • 项目3

现代化卡片展示#

🚀

极致性能

采用最新技术栈，确保应用运行流畅，响应迅速，为用户提供无缝体验。

🎨

现代设计

简洁美观的界面设计，精心调校的动画效果，让每一次交互都充满愉悦。

⚡

快速开发

完善的组件库和开发工具，大幅提升开发效率，快速构建高质量应用。

特性亮点#

这些卡片具有：

  • 悬浮效果：鼠标悬停时优雅上浮
  • 渐变边框：顶部彩色渐变装饰
  • 柔和阴影：多层阴影营造深度感
  • 流畅动画：入场动画和交互反馈
  • 现代化配色：精心挑选的渐变色彩

别知己#

英雄泪#

🎵 别知已 - 海来阿木

💡 提示框：这里是使用HTML和CSS增强的内容区域

卡片标题 1

卡片内容描述...

卡片标题 2

卡片内容描述...

卡片标题 3

卡片内容描述...

回到纯Markdown#

继续使用Markdown语法：

代码块示例：

def hello_world(): print(“Hello GitHub!”)

HTML 增强内容#

💡 提示框：这里是使用HTML和CSS增强的内容区域

卡片布局示例#

卡片标题 1

卡片内容描述...

卡片标题 2

卡片内容描述...

卡片标题 3

卡片内容描述...

回到纯Markdown#

<!-- 第一个播放器 -->
<div class="music-item">
  <div class="song-info">别知己</div>
  <audio controls>
    <source src="https://fly.hangdn.com/assets/music/%E5%88%AB%E7%9F%A5%E5%B7%B1%20(%E5%85%B8%E8%97%8F%E6%AD%A3%E7%89%88)%20-%20%E6%B5%B7%E6%9D%A5%E9%98%BF%E6%9C%A8.mp3" type="audio/flac">
  </audio>
</div>


<!-- 第二个播放器 -->
<div class="music-item">
  <div class="song-info">英雄泪 - 王杰</div>
  <audio controls>
    <source src="https://fly.hangdn.com/assets/music/%E8%8B%B1%E9%9B%84%E6%B3%AA2.mp3" type="audio/flac">
  </audio>
</div>


<!-- 第三个播放器 -->
<div class="music-item">
  <div class="song-info">光辉岁月 - BEYOND</div>
  <audio controls>
    <source src="https://fly.hangdn.com/assets/music/光辉岁月 - BEYOND.mp3" type="audio/flac">
  </audio>
</div>


<style>
.music-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  margin-bottom: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #e9ecef;
  max-width: 600px;
}


.song-info {
  min-width: 200px;
  font-weight: bold;
  color: #333;
}


.music-item audio {
  flex: 1;
  height: 40px;
}
</style>


---
<div class="modern-music-player">
  <!-- 第一个播放器 -->
  <div class="music-card">
    <div class="card-gradient"></div>
    <div class="card-content">
      <div class="album-art">
        <div class="vinyl">
          <div class="vinyl-inner"></div>
        </div>
        <div class="music-waves">
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
        </div>
      </div>
      <div class="song-details">
        <h3 class="song-title">别知己</h3>
        <p class="artist">海来阿木</p>
        <div class="music-progress">
          <div class="progress-bar">
            <div class="progress"></div>
          </div>
        </div>
      </div>
      <audio class="audio-element">
        <source src="https://fly.hangdn.com/assets/music/%E5%88%AB%E7%9F%A5%E5%B7%B1%20(%E5%85%B8%E8%97%8F%E6%AD%A3%E7%89%88)%20-%20%E6%B5%B7%E6%9D%A5%E9%98%BF%E6%9C%A8.mp3" type="audio/mp3">
      </audio>
      <div class="player-controls">
        <button class="control-btn play-btn">
          <svg class="play-icon" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
          <svg class="pause-icon" viewBox="0 0 24 24" style="display: none;">
            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
          </svg>
        </button>
        <div class="time-display">0:00</div>
      </div>
    </div>
  </div>


  <!-- 第二个播放器 -->
  <div class="music-card">
    <div class="card-gradient"></div>
    <div class="card-content">
      <div class="album-art">
        <div class="vinyl">
          <div class="vinyl-inner"></div>
        </div>
        <div class="music-waves">
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
        </div>
      </div>
      <div class="song-details">
        <h3 class="song-title">英雄泪</h3>
        <p class="artist">王杰</p>
        <div class="music-progress">
          <div class="progress-bar">
            <div class="progress"></div>
          </div>
        </div>
      </div>
      <audio class="audio-element">
        <source src="https://fly.hangdn.com/assets/music/%E8%8B%B1%E9%9B%84%E6%B3%AA2.mp3" type="audio/mp3">
      </audio>
      <div class="player-controls">
        <button class="control-btn play-btn">
          <svg class="play-icon" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
          <svg class="pause-icon" viewBox="0 0 24 24" style="display: none;">
            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
          </svg>
        </button>
        <div class="time-display">0:00</div>
      </div>
    </div>
  </div>


  <!-- 第三个播放器 -->
  <div class="music-card">
    <div class="card-gradient"></div>
    <div class="card-content">
      <div class="album-art">
        <div class="vinyl">
          <div class="vinyl-inner"></div>
        </div>
        <div class="music-waves">
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
        </div>
      </div>
      <div class="song-details">
        <h3 class="song-title">光辉岁月</h3>
        <p class="artist">BEYOND</p>
        <div class="music-progress">
          <div class="progress-bar">
            <div class="progress"></div>
          </div>
        </div>
      </div>
      <audio class="audio-element">
        <source src="https://fly.hangdn.com/assets/music/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88%20-%20BEYOND.mp3" type="audio/mp3">
      </audio>
      <div class="player-controls">
        <button class="control-btn play-btn">
          <svg class="play-icon" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
          <svg class="pause-icon" viewBox="0 0 24 24" style="display: none;">
            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
          </svg>
        </button>
        <div class="time-display">0:00</div>
      </div>
    </div>
  </div>
</div>


<style>
.modern-music-player {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}


.music-card {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}


.music-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}


.card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 300% 100%;
  animation: gradientShift 3s ease infinite;
}


@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}


.card-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 25px;
  align-items: center;
}


.album-art {
  position: relative;
  width: 80px;
  height: 80px;
}


.vinyl {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #2c3e50, #34495e);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.6s ease;
}


.vinyl-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: #ecf0f1;
  border-radius: 50%;
  border: 2px solid #bdc3c7;
}


.music-card.playing .vinyl {
  animation: rotate 4s linear infinite;
}


@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.music-waves {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}


.music-card.playing .music-waves {
  opacity: 1;
}


.wave {
  width: 4px;
  height: 20px;
  background: #667eea;
  margin: 0 2px;
  border-radius: 2px;
  display: inline-block;
  animation: wave 1.2s infinite ease-in-out;
}


.wave:nth-child(2) { animation-delay: -1.1s; }
.wave:nth-child(3) { animation-delay: -0.9s; }


@keyframes wave {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1); }
}


.song-details {
  flex: 1;
}


.song-title {
  font-size: 1.4em;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 5px 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


.artist {
  color: #7f8c8d;
  margin: 0 0 15px 0;
  font-size: 0.95em;
}


.music-progress {
  width: 100%;
}


.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}


.progress {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s ease;
}


.player-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}


.control-btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}


.control-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}


.control-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}


.time-display {
  font-size: 0.9em;
  color: #7f8c8d;
  font-variant-numeric: tabular-nums;
  min-width: 45px;
}


.audio-element {
  display: none;
}


/* 响应式设计 */
@media (max-width: 768px) {
  .card-content {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }


  .album-art {
    margin: 0 auto;
  }


  .player-controls {
    justify-content: center;
  }


  .music-card {
    padding: 20px;
  }
}


/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .music-card {
    background: rgba(30, 30, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
  }


  .song-title {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }


  .artist {
    color: #bdc3c7;
  }
}
</style>


<script>
document.querySelectorAll('.music-card').forEach(card => {
  const audio = card.querySelector('.audio-element');
  const playBtn = card.querySelector('.play-btn');
  const playIcon = card.querySelector('.play-icon');
  const pauseIcon = card.querySelector('.pause-icon');
  const progress = card.querySelector('.progress');
  const timeDisplay = card.querySelector('.time-display');
  const progressBar = card.querySelector('.progress-bar');


  // 播放/暂停功能
  playBtn.addEventListener('click', () => {
    if (audio.paused) {
      // 暂停其他正在播放的音乐
      document.querySelectorAll('.audio-element').forEach(otherAudio => {
        if (otherAudio !== audio && !otherAudio.paused) {
          otherAudio.pause();
          otherAudio.closest('.music-card').classList.remove('playing');
          otherAudio.closest('.music-card').querySelector('.play-icon').style.display = 'block';
          otherAudio.closest('.music-card').querySelector('.pause-icon').style.display = 'none';
        }
      });


      audio.play();
      card.classList.add('playing');
      playIcon.style.display = 'none';
      pauseIcon.style.display = 'block';
    } else {
      audio.pause();
      card.classList.remove('playing');
      playIcon.style.display = 'block';
      pauseIcon.style.display = 'none';
    }
  });


  // 更新进度条
  audio.addEventListener('timeupdate', () => {
    const percent = (audio.currentTime / audio.duration) * 100;
    progress.style.width = percent + '%';


    // 更新时间显示
    const currentTime = formatTime(audio.currentTime);
    const duration = formatTime(audio.duration);
    timeDisplay.textContent = `${currentTime}`;
  });


  // 点击进度条跳转
  progressBar.addEventListener('click', (e) => {
    const rect = progressBar.getBoundingClientRect();
    const percent = (e.clientX - rect.left) / rect.width;
    audio.currentTime = percent * audio.duration;
  });


  // 音乐结束重置
  audio.addEventListener('ended', () => {
    card.classList.remove('playing');
    playIcon.style.display = 'block';
    pauseIcon.style.display = 'none';
    progress.style.width = '0%';
    timeDisplay.textContent = '0:00';
  });
});


function formatTime(seconds) {
  if (isNaN(seconds)) return '0:00';
  const min = Math.floor(seconds / 60);
  const sec = Math.floor(seconds % 60);
  return `${min}:${sec.toString().padStart(2, '0')}`;
}
</script>

表格示例：

功能描述状态
Markdown基础文本格式化✅
HTML高级布局和样式✅
CSS自定义样式✅
音乐轮播（点击展开）
别知己
海来阿木
0:00 0:00
英雄泪
王杰
0:00 0:00
光辉岁月
BEYOND
0:00 0:00
---
音乐轮播（点击展开）
<div class="clean-music-player">
  <!-- 第一个播放器 -->
  <div class="music-item">
    <div class="music-header">
      <div class="song-info">
        <div class="song-title">别知己</div>
        <div class="song-artist">海来阿木</div>
      </div>
      <button class="play-control">
        <svg class="play-icon" viewBox="0 0 24 24" width="16" height="16">
          <path fill="currentColor" d="M8 5v14l11-7z"/>
        </svg>
        <svg class="pause-icon" viewBox="0 0 24 24" width="16" height="16" style="display: none;">
          <path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
        </svg>
      </button>
    </div>
    <div class="progress-container">
      <div class="progress-bar">
        <div class="progress-fill"></div>
      </div>
      <div class="time-display">
        <span class="current-time">0:00</span>
        <span class="total-time">0:00</span>
      </div>
    </div>
    <audio class="audio-element">
      <source src="https://fly.hangdn.com/assets/music/%E5%88%AB%E7%9F%A5%E5%B7%B1%20(%E5%85%B8%E8%97%8F%E6%AD%A3%E7%89%88)%20-%20%E6%B5%B7%E6%9D%A5%E9%98%BF%E6%9C%A8.mp3" type="audio/mp3">
    </audio>
  </div>


  <!-- 第二个播放器 -->
  <div class="music-item">
    <div class="music-header">
      <div class="song-info">
        <div class="song-title">英雄泪</div>
        <div class="song-artist">王杰</div>
      </div>
      <button class="play-control">
        <svg class="play-icon" viewBox="0 0 24 24" width="16" height="16">
          <path fill="currentColor" d="M8 5v14l11-7z"/>
        </svg>
        <svg class="pause-icon" viewBox="0 0 24 24" width="16" height="16" style="display: none;">
          <path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
        </svg>
      </button>
    </div>
    <div class="progress-container">
      <div class="progress-bar">
        <div class="progress-fill"></div>
      </div>
      <div class="time-display">
        <span class="current-time">0:00</span>
        <span class="total-time">0:00</span>
      </div>
    </div>
    <audio class="audio-element">
      <source src="https://fly.hangdn.com/assets/music/%E8%8B%B1%E9%9B%84%E6%B3%AA2.mp3" type="audio/mp3">
    </audio>
  </div>


  <!-- 第三个播放器 -->
  <div class="music-item">
    <div class="music-header">
      <div class="song-info">
        <div class="song-title">光辉岁月</div>
        <div class="song-artist">BEYOND</div>
      </div>
      <button class="play-control">
        <svg class="play-icon" viewBox="0 0 24 24" width="16" height="16">
          <path fill="currentColor" d="M8 5v14l11-7z"/>
        </svg>
        <svg class="pause-icon" viewBox="0 0 24 24" width="16" height="16" style="display: none;">
          <path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
        </svg>
      </button>
    </div>
    <div class="progress-container">
      <div class="progress-bar">
        <div class="progress-fill"></div>
      </div>
      <div class="time-display">
        <span class="current-time">0:00</span>
        <span class="total-time">0:00</span>
      </div>
    </div>
    <audio class="audio-element">
      <source src="https://fly.hangdn.com/assets/music/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88%20-%20BEYOND.mp3" type="audio/mp3">
    </audio>
  </div>
</div>


<style>
.clean-music-player {
  max-width: 600px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


.music-item {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.music-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-color: #d0d7de;
}


.music-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}


.song-info {
  flex: 1;
  min-width: 0; /* 防止文本溢出 */
}


.song-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.song-artist {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.play-control {
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 10px;
}


.play-control:hover {
  background: #f8f9fa;
  border-color: #d1d5db;
  transform: scale(1.05);
}


.play-control:active {
  transform: scale(0.95);
}


.progress-container {
  width: 100%;
}


.progress-bar {
  width: 100%;
  height: 3px;
  background: #f3f4f6;
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
}


.progress-fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s ease;
  position: relative;
}


.progress-fill::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #3b82f6;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}


.progress-bar:hover .progress-fill::after {
  opacity: 1;
}


.time-display {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


.current-time, .total-time {
  font-size: 10px;
}


.audio-element {
  display: none;
}


/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .music-item {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }


  .music-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border-color: #4b5563;
  }


  .song-title {
    color: #f9fafb;
  }


  .song-artist {
    color: #d1d5db;
  }


  .play-control {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }


  .play-control:hover {
    background: #4b5563;
  }


  .progress-bar {
    background: #374151;
  }


  .progress-fill {
    background: #60a5fa;
  }


  .progress-fill::after {
    background: #60a5fa;
  }


  .time-display {
    color: #9ca3af;
  }
}


/* 移动端优化 */
@media (max-width: 640px) {
  .music-item {
    padding: 8px 10px;
    margin-bottom: 8px;
    min-height: 52px;
  }


  .song-title {
    font-size: 13px;
  }


  .song-artist {
    font-size: 11px;
  }


  .play-control {
    width: 26px;
    height: 26px;
    margin-left: 8px;
  }


  .play-control svg {
    width: 14px;
    height: 14px;
  }


  .time-display {
    font-size: 9px;
  }
}
</style>


<script>
document.querySelectorAll('.music-item').forEach(item => {
  const audio = item.querySelector('.audio-element');
  const playControl = item.querySelector('.play-control');
  const playIcon = item.querySelector('.play-icon');
  const pauseIcon = item.querySelector('.pause-icon');
  const progressFill = item.querySelector('.progress-fill');
  const progressBar = item.querySelector('.progress-bar');
  const currentTimeEl = item.querySelector('.current-time');
  const totalTimeEl = item.querySelector('.total-time');


  // 设置音频加载后的时长
  audio.addEventListener('loadedmetadata', () => {
    totalTimeEl.textContent = formatTime(audio.duration);
  });


  // 播放/暂停功能
  playControl.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();


    if (audio.paused) {
      // 暂停其他正在播放的音乐
      document.querySelectorAll('.audio-element').forEach(otherAudio => {
        if (otherAudio !== audio && !otherAudio.paused) {
          otherAudio.pause();
          const otherItem = otherAudio.closest('.music-item');
          otherItem.querySelector('.play-icon').style.display = 'block';
          otherItem.querySelector('.pause-icon').style.display = 'none';
        }
      });


      audio.play().catch(e => {
        console.log('播放失败:', e);
      });
      playIcon.style.display = 'none';
      pauseIcon.style.display = 'block';
    } else {
      audio.pause();
      playIcon.style.display = 'block';
      pauseIcon.style.display = 'none';
    }
  });


  // 更新进度条和时间
  audio.addEventListener('timeupdate', () => {
    if (audio.duration) {
      const percent = (audio.currentTime / audio.duration) * 100;
      progressFill.style.width = percent + '%';
      currentTimeEl.textContent = formatTime(audio.currentTime);
    }
  });


  // 点击进度条跳转
  progressBar.addEventListener('click', (e) => {
    if (audio.duration) {
      const rect = progressBar.getBoundingClientRect();
      const percent = (e.clientX - rect.left) / rect.width;
      audio.currentTime = percent * audio.duration;
    }
  });


  // 音乐结束重置
  audio.addEventListener('ended', () => {
    playIcon.style.display = 'block';
    pauseIcon.style.display = 'none';
    progressFill.style.width = '0%';
    currentTimeEl.textContent = '0:00';
  });


  // 音频加载错误处理
  audio.addEventListener('error', (e) => {
    console.error('音频加载失败:', audio.src, e);
  });
});


function formatTime(seconds) {
  if (isNaN(seconds) || !isFinite(seconds)) return '0:00';
  const min = Math.floor(seconds / 60);
  const sec = Math.floor(seconds % 60);
  return `${min}:${sec.toString().padStart(2, '0')}`;
}


// 预加载音频信息
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.audio-element').forEach(audio => {
    audio.addEventListener('loadedmetadata', function() {
      const totalTimeEl = this.closest('.music-item').querySelector('.total-time');
      totalTimeEl.textContent = formatTime(this.duration);
    });
  });
});
</script>

© 2024 您的项目名称

赞助支持

如果这篇文章对你有帮助，欢迎赞助支持！

赞助
博客模版，示例
https://fly.hangdn.com
作者
小史先森
发布于
2025-11-10
许可协议
CC BY 4.0
最后更新于 2025-11-10，距今已过 9 天

部分内容可能已过时

评论区

分享你的想法，与大家交流讨论

100条金句摘录，励志句子欣赏
交易之道《完整篇》,本文讲述证券期货市场交易法则，交易投机者的生存之道
本站访客数：Loading... 人次 | 本站总访问量：Loading... 次
本站已正常运行 0天0时0分0秒
© 2025 hangdn. All Rights Reserved. / RSS / Sitemap
Powered by Astro & Hangdn

目录

专辑封面