博客中如何添加一款精美的HTML5 |
您所在的位置：网站首页 › html5音频播放器代码 › 博客中如何添加一款精美的HTML5 |
博客中如何添加一款精美的HTML5
|
- 简介 这几天一直在写博客的前端页面，看着单一且不能自定义播放背景音乐，总觉得少了点什么。百度了一下，找到了一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件 APlayer，该项目由一名bili bili 的前端大牛DIYgod开源,Aplayer拥有在线歌源、歌词滚动等常用功能。 - 项目地址 GIthub地址 Aplayer中文文档 - 使用方法 前往上面的github地址,下载到本地,进入目录/dist找到 APlayer.min.css 和 APlayer.min.js 两个文件，复制到你的项目中。 Aplayer is a beautiful HTML5 music player const ap = new APlayer({ container: document.getElementById('aplayer'), fixed: true, //是否附着页面底部，否为false autoplay: true, //是否自动播放，否为false,移动端不能生效 volume: 0.6, //初始音量（0~1） lrcType: 3, //歌词模式（1、HTML模式 2、js模式 3、lrc文件模式） mutex: true, //互斥模式：阻止多个播放器同时播放，当前播放器播放时暂停其他播放器 order: 'random', //音频循环顺序（'list'：顺序, 'random'：随机） preload: 'none', //预加载（'none'：不预加载, 'metadata'：元数据, 'auto'：自动） listFolded: false, //列表默认折叠，开启为true theme: '#ee8243', //主题颜色 audio: [{ name: 'name', //歌曲名称 artist: 'artist', //歌曲作者 url: 'url.mp3', //歌曲源文件地址 cover: 'cover.jpg', //歌曲封面地址 lrc: 'lrc.lrc', //歌曲的歌词文件 theme: '#eeeeee' //主题颜色（优先） }] });- 效果图 |
【本文地址】
今日新闻 |
推荐新闻 |