如何给网页添加好看的HTML音乐播放器

序

目前MoePlayer/cPlayer 可以达到想要的效果。

做法

在需要的位置用

，然后其余都放在底部Script里。 DIV ID要和Script的element: document.getElementById(‘app’)中相互对应

<div id="app"></div>

### Script下 ###
<!-- 加载 cplayer 脚本 -->
<script src="https://cdn.jsdelivr.net/npm/cplayer/dist/cplayer.min.js"></script>
<script>
  let player = new cplayer({
    element: document.getElementById('app'),
    playlist: [
      {
        src: '歌曲资源链接...',
        poster: '封面链接...',
        name: '歌曲名称...',
        artist: '歌手名称...',
        lyric: '歌词...', ##例如abc.lrc
        sublyric: '副歌词，一般为翻译...'
      },
	  ##第二首歌
      {
        ...
      },
      ......
    ]
  })
</script>

完成

• 本文标题：如何给网页添加好看的HTML音乐播放器
• 本文作者：暗香疏影
• 创建时间：2020-04-23 00:00:00
• 本文链接：https://blog.withkr.xyz/2020/04/23/2020-04-23-Web-HTML-Music-Player/
• 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
• #HTML
• #Audio Player

AWS EC2实例迁移教程 上一篇

华为eSpace 7910如何添加铃声 下一篇

 评论

function loadTwikoo() { twikoo.init({ el: '#twikoo-comment', envId: 'https://twikoo-vercel-server-nexmoe.vercel.app', }); } if ('true') { const loadTwikooTimeout = setTimeout(() => { loadTwikoo(); clearTimeout(loadTwikooTimeout); }, 1000); } else { window.addEventListener('DOMContentLoaded', loadTwikoo); }