前言
很久之前发过类似的,有白天黑夜模式这是只保留了黑夜模式,增加了故障特效,音乐可以自定义播放,请自行体验!
效果图
部分源码
function APlayer(option) {
// handle options error
if (!('music' in option && 'title' in option.music && 'author' in option.music && 'url' in option.music && 'pic' in option.music)) {
throw 'APlayer Error: Music, music.title, music.author, music.url, music.pic are required in options';
}
if (option.element === null) {
throw 'APlayer Error: element option null';
}
this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
// compatibility: some mobile browsers don't suppose autoplay
if (this.isMobile) {
option.autoplay = false;
}
// default options
var defaultOption = {
element: document.getElementsByClassName('aplayer')[0],
narrow: false,
autoplay: false,
showlrc: false
};
for (var defaultKey in defaultOption) {
if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
option[defaultKey] = defaultOption[defaultKey];
}
}
this.option = option;
}
window.onerror = function killerrors() {
return true;
}
APlayer.prototype.init = function () {
this.element = this.option.element;
this.music = this.option.music;
// parser lrc
if (this.option.showlrc) {
this.lrcTime = [];
this.lrcLine = [];
var lrcs = this.element.getElementsByClassName('aplayer-lrc-content')[0].innerHTML;
var lines = lrcs.split(/\n/);
var timeExp = /\[(\d{2}):(\d{2})\.(\d{2})]/;
var lrcExp = /](.*)$/;
var notLrcLineExp = /\[[A-Za-z]+:/;
for (var i = 0; i < lines.length; i++) {
lines[i] = lines[i].replace(/^\s+|\s+$/g, '');
var oneTime = timeExp.exec(lines[i]);
var oneLrc = lrcExp.exec(lines[i]);
if (oneTime && oneLrc && !lrcExp.exec(oneLrc[1])) {
this.lrcTime.push(parseInt(oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / 100);
this.lrcLine.push(oneLrc[1]);
}
else if (lines[i] && !notLrcLineExp.exec(lines[i])) {
throw 'APlayer Error: lrc format error : should be like `[mm:ss.xx]lyric` : ' + lines[i];
}
}
}
领取完整源码
一款花里胡哨的故障个人主页源码领取地址:https://www.123pan.com/s/ji8kjv-5iXU3.html 关注微信公众号 祖龙科技工作室回复 故障主页 即可领取
下期更新
孤客支付系统
- 📢本人公众号:祖龙科技工作室
- 📢博客主页:孤客网络科技工作室官方账号
- 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正!
- 📢本文由孤客原创,若侵权联系作者,首发于CSDN博客
- 📢停下休息的时候不要忘了别人还在奔跑,希望大家抓紧时间学习,全力奔赴更好的生活💻