hugo小改

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css     ">
<div id="music-icon">
  <i class="fas fa-music"></i>
</div>

<audio id="audio" controls style="display: none;"></audio>

<style>
  /* 音符图标样式 */
  #music-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-size: 24px;
    color: rgb(56, 136, 192);
    cursor: pointer;
    z-index: 9999;
    transition: transform 0.3s ease;
  }

  #music-icon:hover {
    transform: scale(1.2);
  }

  /* 旋转动画 */
  .rotate {
    animation: rotateIcon 2s linear infinite;
  }

  @keyframes rotateIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

<script>
  const musicIcon = document.getElementById('music-icon');
  const audio = document.getElementById('audio');

  // 音乐列表
  const musicList = [
    { type: 'netease', id: '1464399264', note:'a portentous walk'}, 
    { type: 'netease', id: '1472026274', note:'Brooklyn的卡农' }, 
    { type: 'netease', id: '1491384650', note:'水星湖' }, 
    { type: 'netease', id: '1814460094', note:'Waves That Sound Like You' }, 
    { type: 'local', src: '/music/nop-陈越龙.flac' },
    { type: 'local', src: '/music/time_machine.mp3' }
  ];

  // 将网页版地址后面的数字替换下面的数字，ctrl+单击打开浏览器，如果可以播放音乐说明可以使用，其他页面不能使用。
  // https://music.163.com/song/media/outer/url?id=1814460094.mp3     

  let currentIndex = -1;

  // 从本地存储恢复状态
  function restorePlaybackState() {
    const savedState = localStorage.getItem('musicPlayerState');
    if (savedState) {
      const state = JSON.parse(savedState);
      currentIndex = state.currentIndex >= 0 ? state.currentIndex : -1;
      
      if (state.isPlaying && currentIndex >= 0) {
        const song = musicList[currentIndex];
        setAudioSource(song);
        setTimeout(() => {
          audio.play().catch(e => console.log('自动播放被阻止:', e));
          musicIcon.classList.add('rotate');
        }, 100);
      }
    }
  }

  // 保存播放状态到本地存储
  function savePlaybackState() {
    const state = {
      isPlaying: !audio.paused,
      currentIndex: currentIndex,
      currentTime: audio.currentTime
    };
    localStorage.setItem('musicPlayerState', JSON.stringify(state));
  }

  // 设置播放源
  function setAudioSource(song) {
    if (song.type === 'netease') {
      audio.src = `https://music.163.com/song/media/outer/url?id=     ${song.id}.mp3`;
    } else {
      audio.src = song.src;
    }
    // 恢复播放位置
    audio.onloadedmetadata = () => {
      const savedState = JSON.parse(localStorage.getItem('musicPlayerState') || '{}');
      if (savedState.currentTime && audio.currentTime < savedState.currentTime) {
        audio.currentTime = savedState.currentTime;
      }
    };
  }

  // 随机播放下一首歌曲
  function playNextSong() {
    let randomIndex;
    do {
      randomIndex = Math.floor(Math.random() * musicList.length);
    } while (randomIndex === currentIndex);
    currentIndex = randomIndex;
    const nextSong = musicList[currentIndex];
    setAudioSource(nextSong);

    audio.play().catch(error => {
      console.error('播放失败:', error);
      setTimeout(playNextSong, 1000);
    });

    musicIcon.classList.add('rotate');
    savePlaybackState();
  }

  // 初始化播放器
  function initPlayer() {
    restorePlaybackState();
    musicIcon.addEventListener('click', () => {
      if (audio.paused) {
        if (!audio.src) {
          playNextSong();
        } else {
          audio.play().then(() => {
            musicIcon.classList.add('rotate');
            savePlaybackState();
          });
        }
      } else {
        audio.pause();
        musicIcon.classList.remove('rotate');
        savePlaybackState();
      }
    });

    audio.addEventListener('ended', playNextSong);
    
    audio.addEventListener('error', () => {
      console.error('播放错误，尝试下一首');
      playNextSong();
    });

    setInterval(savePlaybackState, 5000);
    
    window.addEventListener('beforeunload', savePlaybackState);
  }

  document.addEventListener('DOMContentLoaded', initPlayer);
</script>

{{ partial "music-player.html" . }}

<script>

document.addEventListener("DOMContentLoaded", () => {
  const codeElements = document.querySelectorAll("code");
  codeElements.forEach((codeElement) => {
    codeElement.addEventListener("click", (event) => {
      const textToCopy = codeElement.innerText;
      navigator.clipboard.writeText(textToCopy).then(() => {
        console.log("已复制:", textToCopy);
        let tooltip = codeElement.querySelector(".tooltip");

        if (!tooltip) {
          tooltip = document.createElement("div");
          tooltip.className = "tooltip";
          tooltip.textContent = "已复制";
          codeElement.appendChild(tooltip);
        }

        const rect = codeElement.getBoundingClientRect();

        // 设置提示框位置：
        tooltip.style.left = `${rect.left + rect.width / 2}px`;
        tooltip.style.top = `${rect.top - 30}px`;
        tooltip.classList.add("show");
        setTimeout(() => {
          tooltip.classList.remove("show");
        }, 1000);
      }).catch((err) => {
        console.error("复制失败:", err);
      });
    });

    codeElement.style.cursor = "pointer";
    codeElement.style.userSelect = "none";
  });
});
</script>
<style>
/* 提示框基础样式 */
.tooltip {
  position: fixed;
  transform: translateX(-50%);
  background-color: rgb(8, 51, 110);
  color: rgb(96, 166, 222);
  padding: 6px 12px;
  border-radius: 4px;
  /* 字体样式 */
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
  min-width: 60px;
  max-width: 120px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.tooltip.show {
  opacity: 1;
}
</style>