少女祈祷中.

音乐播放器

wallhaven-4vzej5
wallhaven-4vzej5

作为一个强迫症,博客没有音乐播放器始终感觉有些遗憾,尽管没怎么写文章

使用Markdown就代表无法像博客程序那样能快捷方便的添加音乐了,不过这样拦不住我想添加音乐的的想法

Markdown可以插入Audio标签,虽然支持有限但还是从歌曲中获取的详细的歌曲信息,就是请求也多了几个而已

使用下面的代码在Markdown文章中插入音乐

  • controls 使用controls属性是禁用JavaScript的时候还能继续播放音乐,JavaScript执行的时候会自动将controls关闭
  • preload="metadata" 加载基础的音乐信息就够
  • title title值存在将直接作为歌曲标题
  • artist artist值存在将直接作为歌曲作家
  • cover cover值存在将直接作为歌曲封面
<audio controls preload="metadata" src="音乐地址"></audio>

注意点:

  • 加载音乐信息会使用fetch请求,这个受同源策略影响,所以音乐位置必需在支持CORS的服务器或者同域名下
  • 加载成功后,artist值和cover值将被删除,title值将变为 歌曲名 + 歌曲作家
  • 当音乐播放时,页面标题将会变为 歌曲名 + 歌曲作家

留言|评论

还没有评论,快来评论吧

坐等你的评论~

    Beta版使用Firebase存储