Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 技术分享 > html网页音乐播放器

html网页音乐播放器

浏览: 作者:Datehoer 发布日期:2021-01-09 21:52:50 来源: 原创
其实一直想在网站上加一个音乐播放器的,但是当时搜索的是谷歌浏览器无法自动播放,所以就没准备加。
并且其实当时也自己写了一个播放器,网页音乐播放器 音乐播放器 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 音乐平台:neteasetencentkugouxiamibaidu
type(类型) require songplaylistalbumsearchartist
auto(支持类种 类) options 音乐链接,支持:neteasetencentxiami
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网页音乐播放器,开箱即用。

如果有什么疑问,可以在评论区留言,我会在看到的第一时间进行回复的。



版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/jsfx/117.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0