音乐播放器设计与实现-公司动态-背景音乐-永久开源免费的PHP企业网站开发建设管理系统

设计思路
我将创建一个响应式音乐播放器，核心功能包括：左右对称旋转的专辑图片、同步的音乐控制、实时进度条显示和歌词滚动效果。旋转效果将通过CSS动画实现，音乐控制则使用HTML5 Audio API，歌词同步通过JavaScript处理
完整代码实现
<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <style>* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); color: white; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .player-container { width: 100%; max-width: 400px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 25px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); } .album-art-container { display: flex; justify-content: space-between; margin-bottom: 25px; } .album-art { width: 140px; height: 140px; border-radius: 50%; background-size: cover; background-position: center; border: 3px solid rgba(255, 255, 255, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .album-art-left { background-image: url('https://picsum.photos/seed/left/300'); } .album-art-right { background-image: url('https://picsum.photos/seed/right/300'); } .rotate-both { animation: rotate 8s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .song-info { text-align: center; margin-bottom: 20px; } .song-title { font-size: 1.5rem; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .song-artist { color: rgba(255, 255, 255, 0.8); font-size: 1rem; } .progress-container { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 10px; margin-bottom: 15px; cursor: pointer; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, #ff9966, #ff5e62); border-radius: 10px; width: 0%; transition: width 0.1s linear; } .time-display { display: flex; justify-content: space-between; margin-bottom: 20px; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; } .controls { display: flex; justify-content: center; align-items: center; gap: 25px; margin-bottom: 25px; } .btn { background: none; border: none; color: white; cursor: pointer; font-size: 1.2rem; display: flex; justify-content: center; align-items: center; transition: all 0.2s; } .btn-play { width: 60px; height: 60px; background: linear-gradient(135deg, #ff9966, #ff5e62); border-radius: 50%; font-size: 1.8rem; } .btn:hover { transform: scale(1.1); } .btn:active { transform: scale(0.95); } .lyrics-container { height: 200px; overflow: hidden; position: relative; background: rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 15px; } .lyrics { text-align: center; transition: transform 0.3s ease; } .lyric-line { margin-bottom: 12px; line-height: 1.5; font-size: 1rem; transition: all 0.3s ease; } .current-lyric { color: #ff9966; font-weight: bold; transform: scale(1.05); } .volume-control { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 15px; } .volume-slider { width: 100px; accent-color: #ff9966; }</style></head>
  
  <body>
    <div>
      <div>
        <div class="album-art album-art-left"></div>
        <div class="album-art album-art-right"></div>
      </div>
      <div>
        <h2>示例音乐名称</h2>
        <p>示例歌手</p></div>
      <div id="progress-container">
        <div id="progress-bar"></div>
      </div>
      <div>
        <span id="current-time">0:00</span>
        <span id="total-time">0:00</span></div>
      <div>
        <button id="prev-btn">⏮</button>
        <button class="btn btn-play" id="play-btn">▶</button>
        <button id="next-btn">⏭</button></div>
      <div>
        <span>🔈</span>
        <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.7">
        <span>🔊</span></div>
      <div>
        <div id="lyrics">
          <div>歌词加载中...</div></div>
      </div>
    </div>
    <script>document.addEventListener('DOMContentLoaded',
      function() { // 获取DOM元素
        const playBtn = document.getElementById('play-btn');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const albumArts = document.querySelectorAll('.album-art');
        const progressContainer = document.getElementById('progress-container');
        const progressBar = document.getElementById('progress-bar');
        const currentTimeEl = document.getElementById('current-time');
        const totalTimeEl = document.getElementById('total-time');
        const volumeSlider = document.getElementById('volume-slider');
        const lyricsEl = document.getElementById('lyrics');
        // 创建音频对象
        const audio = new Audio();
        audio.src = 'https://example.com/audio/sample-song.mp3'; // 替换为你的音频URL
        audio.volume = 0.7;
        // 示例歌词数据（格式：时间(秒) + 歌词）
        const lyricsData = [{
          time: 0,
          text: "欢迎使用音乐播放器"
        },
        {
          time: 5,
          text: "这是一段示例歌词"
        },
        {
          time: 10,
          text: "左右图片正在同步旋转"
        },
        {
          time: 15,
          text: "享受音乐的魅力"
        },
        {
          time: 20,
          text: "播放器设计精美"
        },
        {
          time: 25,
          text: "功能齐全实用"
        },
        {
          time: 30,
          text: "感谢使用本播放器"
        },
        {
          time: 35,
          text: "更多功能等你发现"
        }];
        // 初始化歌词显示
        function initializeLyrics() {
          lyricsEl.innerHTML = '';
          lyricsData.forEach(item = >{
            const lyricLine = document.createElement('div');
            lyricLine.classList.add('lyric-line');
            lyricLine.textContent = item.text;
            lyricLine.dataset.time = item.time;
            lyricsEl.appendChild(lyricLine);
          });
        }
        // 更新当前歌词高亮
        function updateLyrics(currentTime) {
          const allLyrics = document.querySelectorAll('.lyric-line');
          let activeIndex = -1;
          // 找到当前时间对应的歌词
          for (let i = lyricsData.length - 1; i >= 0; i--) {
            if (currentTime >= lyricsData[i].time) {
              activeIndex = i;
              break;
            }
          }
          // 更新歌词样式
          allLyrics.forEach((line, index) = >{
            if (index === activeIndex) {
              line.classList.add('current-lyric');
            } else {
              line.classList.remove('current-lyric');
            }
          });
          // 滚动歌词到可视区域
          if (activeIndex >= 0 && activeIndex < allLyrics.length) {
            const activeLyric = allLyrics[activeIndex];
            const container = document.querySelector('.lyrics-container');
            const scrollPosition = activeLyric.offsetTop - container.offsetHeight / 2 + activeLyric.offsetHeight / 2;

            lyricsEl.style.transform = `translateY( - $ {
              scrollPosition
            }
            px)`;
          }
        }
        // 播放和暂停功能[6,12](@ref)
        function togglePlay() {
          if (audio.paused) {
            audio.play();
            playBtn.textContent = '⏸'; // 为左右图片添加旋转动画
            albumArts.forEach(art = >art.classList.add('rotate-both'));
          } else {
            audio.pause();
            playBtn.textContent = '▶'; // 移除左右图片的旋转动画
            albumArts.forEach(art = >art.classList.remove('rotate-both'));
          }
        }
        // 更新进度条[8](@ref)
        function updateProgress() {
          const {
            currentTime,
            duration
          } = audio;
          if (duration) {
            const progressPercent = (currentTime / duration) * 100;
            progressBar.style.width = `$ {
              progressPercent
            } % `;
            // 更新时间显示
            currentTimeEl.textContent = formatTime(currentTime);
            totalTimeEl.textContent = formatTime(duration);
          }
        }
        // 设置进度条
        function setProgress(e) {
          const width = this.clientWidth;
          const clickX = e.offsetX;
          const duration = audio.duration;
          audio.currentTime = (clickX / width) * duration;
        }
        // 时间格式化
        function formatTime(seconds) {
          const mins = Math.floor(seconds / 60);
          const secs = Math.floor(seconds % 60);
          return`$ {
            mins
          }: $ {
            secs < 10 ? '0': ''
          }
          $ {
            secs
          }`;
        }
        // 设置音量
        function setVolume() {
          audio.volume = volumeSlider.value;
        }
        // 事件监听
        playBtn.addEventListener('click', togglePlay);
        audio.addEventListener('timeupdate', updateProgress);
        audio.addEventListener('timeupdate', () = >updateLyrics(audio.currentTime));
        audio.addEventListener('ended', () = >{
          playBtn.textContent = '▶';
          albumArts.forEach(art = >art.classList.remove('rotate-both'));
        });
        progressContainer.addEventListener('click', setProgress);
        volumeSlider.addEventListener('input', setVolume);
        // 上一首和下一首按钮（示例功能）
        prevBtn.addEventListener('click', () = >{ // 这里可以添加切换到上一首歌曲的逻辑
          alert('切换到上一首歌曲');
        });

        nextBtn.addEventListener('click', () = >{ // 这里可以添加切换到下一首歌曲的逻辑
          alert('切换到下一首歌曲');
        });
        // 初始化
        initializeLyrics();
      });</script>
  </body>

</html>
公司动态

音乐播放器设计与实现

发表评论：

评论记录：

背景音乐网络有限公司

联系我们

在线咨询

免费通话

微信扫一扫
