其实一直想在网站上加一个音乐播放器的,但是当时搜索的是谷歌浏览器无法自动播放,所以就没准备加。并且其实当时也自己写了一个播放器,

网页音乐播放器 音乐播放器 html++css+js

但是由于懒得写css代码,所以比较丑,然后就没有往网站上加,但是呢,有一个是我一直不明白的地方,就是当时浏览了一个网页,发现他的音乐可以直接播放,所以今天就来研究一下。
其实也就是右键检查,来进行代码的查看,然后ctrl+u查看一下源代码,搜索到刚才看的位置,然后看他的这些代码有啥玄机。
然后我就发现了一个库。
Github:https://github.com/DIYgod/APlayer
非常nice的一个库。

Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。

然后我们直接贴代码就好了,毕竟是人家封装好的库了,所以可以直接使用。
html网页音乐播放器

支持的浏览器

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer 11
  • Microsoft Edge
id(编号)
选项 默认 描述
require 歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台) require 音乐平台: netease,tencent,kugou,xiami,baidu
type(类型) require song, playlist, album ,search ,artist
auto(支持类种 类) options 音乐链接,支持: netease , tencent , xiami
fixed(固定模式) false 启用固定模式,默认 false
mini(迷你模式) false 启用迷你模式,默认 false
autoplay(自动播放) false 音频自动播放,默认 false
theme(主题颜色) #2980b9 默认 #2980b9
loop(循环) all 播放器循环播放,值:“all”,one”,“none”
order(顺序) list 播放器播放顺序,值:“list”,“random”
preload(加载) auto 值:“none”,“metadata”,“'auto”
volume(声量) 0.7 默认音量,请注意播放器会记住用户设置,用户自己设置音量后默认音量将不起作用
mutex(限制) true 防止同时播放多个玩家,在该玩家开始播放时暂停其他玩家
lrc-type(歌词) 0 歌词显示
list-folded(列表折叠) false 指示列表是否应该首先折叠
list-max-height(最大高度) 340px 列出最大高度
storage-name(储存名称) metingjs 存储播放器设置的localStorage键

具体的代码可以去看GitHub库,里面有详细的解释。
简单贴一下我们的这个底部小图标的代码吧。

<meting-js
server="netease"
type="playlist"
id="60198"
fixed="true"
autoplay="true"
loop="all"
order="random"
preload="auto"
list-folded="ture"
list-max-height="500px"
lrc-type="1">
</meting-js>

非常的方便,html网页音乐播放器,开箱即用。

本文作者:博主:     文章标题:html网页音乐播放器
本文地址:https://zjzdmc.top/jsfx/117.html     
版权说明:若无注明,本文皆为“Datehoer的Blog-个人博客-技术分享”原创,转载请保留文章出处。
最后修改:2021 年 04 月 19 日 04 : 57 PM
如果觉得我的文章对你有用,请随意赞赏