通过标签搜索相关文章

通过分类搜索文章

typecho本地音乐播放器代码(支持lrc歌词滚动)

  • Administrator
  • 预计阅读时长≈2分钟
  • 发表于 2025年01月16日 15:20
  • 本代码支持任何typecho,支持展示专辑图、专辑、歌手、lrc歌词滚动
  • 食用方式:代码前后加 !!! 即可。
  • 为什么要搞出这个代码呢?不是有很多音乐插件吗?

最近发现typecho里能用的音乐插件越来越少,大多数的插件都是年久失修。同时也看着群友们在音乐分享的时候,一个简简单单的播放器,还有些歌词直接粘贴在文章里,感觉整体上不是这么好看。

后面呢,突然想到了一个点子,typecho支持嵌入HTML标签,那我直接在编辑器里写好了,也不用找插件麻烦,也省去程序升级后插件不能使用的尴尬,最主要的是修改方便!

  • 有能力的小伙伴们可以做成插件


歌名:Good Time

专辑:Good Time    歌手:Beyond

加载中……



  • 以下代码

<!-- 歌名和歌手 -->
<div style="margin-bottom: 15px;">
    <h2 id="song-title" style="margin: 0; font-size: 20px; font-weight: bold; color: #333;">歌名:Good Time</h2>
    <p id="artist-name" style="margin: 5px 0 0; font-size: 16px; color: #555;">专辑:Good Time &thinsp;&thinsp; 歌手:Beyond</p>
</div>

<!-- 音乐播放器 -->
<audio id="audio" controls style="width: 100%; margin-bottom: 15px;">
    <source src="https://music.htaoo.com/Good%20Time-Beyond.mp3" type="audio/mp3">// 替换为实际的歌曲路径
    您的浏览器不支持音频播放,请升级到支持 HTML5 的浏览器。
</audio>

<!-- 歌词区域 -->
<div id="lyrics" style="max-height: 300px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: #333; background-color: #fff; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    加载中……
</div>

推荐一看