js实现多种可视化音乐播放器效果代码
代码语言：html
所属分类：多媒体
代码描述：js实现多种可视化音乐播放器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="HTML5VisualizationPlayer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
html,
body {
height: 100%;
margin: 0;
font-family: arial, "Microsoft YaHei";
color: #FEFEFE;
}
body {
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
background-image: url("//repo.bfw.wiki/bfwrepo/image/604a26e01dd36.png");
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#fileWrapper {
transition: all 0.5s ease;
}
#fileWrapper:hover {
opacity: 1 !important;
}
#visualizer_wrapper {
text-align: center;
}
footer {
position: fixed;
bottom: 2px;
color: #aaa;
}
.play-box {
position: fixed;
width: 1000px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
}
@charset "utf-8";
.visualizer-player {
display: block;
width: 100%;
height: 100%;
background: #272822;
font-family: arial, "Microsoft YaHei";
border-radius: 3px;
}
@font-face {
/*自定义字体-用于绘制字体图标*/
font-family: 'icomoon';
src: url('//repo.bfw.wiki/bfwrepo/font/icomoon.eot?lawp0h');
src: url('//repo.bfw.wiki/bfwrepo/font/icomoon.eot?lawp0h#iefix') format('embedded-opentype'), url('//repo.bfw.wiki/bfwrepo/font/icomoon.ttf?lawp0h') format('truetype'), url('//repo.bfw.wiki/bfwrepo/font/icomoon.woff?lawp0h') format('woff'), url('//repo.bfw.wiki/bfwrepo/font/icomoon.svg?lawp0h#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.visualizer-player [class^="icon-"],
.visualizer-player [class*=" icon-"] {
/*统一设置字体图标*/
/* 使用 !important 是要防止与浏览器扩展的问题，改变字体 */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* 更好的字体渲染 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.visualizer-player canvas {
position: absolute;
}
.visualizer-player .visualizer-player-tips {
position: fixed;
top: calc(50vh - 40px);
text-align: center;
line-height: 30px;
left: 0;
right: 0;
width: 300px;
height: 30px;
margin: 0 auto;
background-color: #272822;
border-radius: 3px;
cursor: pointer;
padding: 5px;
font-size: 14px;
}
.visualizer-player .player-control {
position: absolute;
height: 32px;
width: 20%;
top: 40%;
margin: 0 0.5%;
}
.visualizer-player .player-control i {
margin: 0 5px;
font-size: 32px;
cursor: pointer;
color: #A7A7A7;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.visualizer-player .player-control i:hover {
color: #FFFFFF;
}
.visualizer-player .player-control #volumeBox {
padding-top: 5px;
display: inline-block;
width: 35px;
}
.visualizer-player .player-control #volumeBox #volumeBar {
position: absolute;
margin: -20px 0 0 40px;
border-radius: 4px;
width: 100px;
height: 5px;
background: #5a5a5a;
cursor: pointer;
}
.visualizer-player .player-control #volumeBox #volumeBar #volumeSize {
position: absolute;
left: 0;
bottom: 0;
height: 100%;
border-radius: 4px;
background: #258fb8;
}
.visualizer-player .player-control #volumeBox:hover #volumeBar {
background: #FFFFFF;
}
.visualizer-player .song-info {
position: absolute;
border-bottom: 1px solid #575656;
height: 25px;
width: 100%;
left: 0;
top: 0;
}
.visualizer-player .song-info i {
position: relative;
height: 25px;
width: 25px;
top: 2px;
font-size: 18px;
margin: 0 5px 0 0;
animation: musicIcon 2.5s infinite;
-webkit-animation: musicIcon 2.5s infinite;
/*Safari and Chrome*/
}
.visualizer-player .song-info span {
text-align: center;
font-weight: bold;
margin: 0 5px;
}
.visualizer-player .song-info .player-state {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
line-height: 25px;
text-align: center;
background: #272822;
border-radius: 4px;
}
.visualizer-player .song-info #songTitle,
.visualizer-player .song-info #artist,
.visualizer-player .song-info #album,
.visualizer-player .song-info span {
margin: 0 5px;
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 100%;
font-size: 14px;
line-height: 25px;
float: left;
}
.visualizer-player .song-info #album,
.visualizer-player .song-info #artist {
font-size: 12px;
}
.visualizer-player .player-show {
position: absolute;
font-size: 14px;
left: 30%;
height: 50px;
width: 70%;
top: 30%;
cursor: default;
}
.visualizer-player .player-show .player-time {
margin: 1% 0 0 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.visualizer-player .player-show .progress {
position: absolute;
bottom: 15px;
border-radius: 4px;
left: 0;
width: 95%;
height: 10px;
background: #5a5a5a;
}
.visualizer-player .player-show .progress .player-progress-bar {
position: absolute;
left: 0;
bottom: 0;
border-radius: 4px;
height: 100%;
background: #258fb8;
}
@keyframes musicIcon {
from {
font-size: 12px;
}
to {
font-size: 18px;
}
}
@-webkit-keyframes musicIcon {
/*Safari and Chrome*/
from {
font-size: 12px;
}
to {
font-size: 18px;
}
}
</style>
<script type="text/javascript">
/**
* HTML5 Audio Visualizer Player
* HTML5音乐可视化播放器
* 版本号:1.4.0
* Author：PoppinRubo
* Github：https://github.com/PoppinRubo/HTML5VisualizationPlayer
* License: MIT
*/
//创建一个对象方法
function Player() {
//播放获取进度信息时间计时器
var timer;
//加载超时计时
var overtime;
//先把自己用变量储存起来,后面要用
var myself = this;
//默认设置
myself.button = { //设置生成的控制按钮,默认开启
prev: true, //上一首
play: true, //播放,暂停
next: true, //下一首
volume: true, //音量
progressControl: true //进度控制
}
myself.analyser = null;
//定义事件默认空方法
myself.event = function (e) {
//未设置事件方法就默认执行空方法
}
//能量传出方法默认空方法
myself.energy = function (v) {
//未设置能量传出就默认执行空方法
}
//频谱配置初始化,外部调用就开始进行处理
this.init = function (object) {
myself.playList = object.playList || [{
title: '播放列表为空',
album: '',
artist: '',
mp3: ''
}];
myself.autoPlay = object.autoPlay || false;
myself.event = object.event || myself.event;
myself.energy = object.energy || myself.energy;
myself.button = object.button || myself.button;
myself.color = object.color || null;
myself.effect = object.effect || 0; //默认随机,效果为0表示随机切换效果
//记录是否处理过音频,保证createMediaElementSource只创建一次,多次创建会出现错误
myself.handle = 0;
createParts();
}
//改变效果
this.change = function (object) {
myself.effect = object.effect || 0;
myself.color = object.color || null;
drawSpectrum(myself.analyser);
}
//实例化一个音频类型window.AudioContext
function windowAudioContext() {
//下面这些是为了统一Chrome和Firefox的AudioContext
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;
try {
myself.audioContext = new AudioContext();
} catch (e) {
console.log('您的浏览器不支持 AudioContext,信息:' + e);
}
}
//创建播放部件
function createParts() {
//创建audio
var audio = document.createElement("AUDIO");
audio.crossOrigin = 'anonymous';
var player = document.getElementsByTagName("player")[0];
player.className = 'visualizer-player';
player.appendChild(audio);
myself.player = player;
myself.audio = audio;
//音乐部件
var songInfo = document.createElement("div");
var control = document.createElement("div");
var playerShow = document.createElement("div");
var playerTime = document.createElement("div");
var progress = document.createElement("div");
var playerProgressBar = document.createElement("div");
songInfo.className = 'song-info';
control.className = 'player-control';
playerShow.className = 'player-show';
playerTime.className = 'player-time';
progress.className = 'progress';
playerProgressBar.className = 'player-progress-bar';
player.appendChild(songInfo);
player.appendChild(control);
player.appendChild(playerShow);
playerShow.appendChild(playerTime);
playerShow.appendChild(progress);
progress.appendChild(playerProgressBar);
myself.songInfo = songInfo;
myself.progress = progress;
myself.playerProgressBar = playerProgressBar;
//创建控制按钮
var button = myself.button;
//创建画布
var canvas = document.createElement("canvas");
canvas.height = 450;
canvas.width = player.clientWidth;
canvas.style.bottom = player.clientHeight + 'px';
player.appendChild(canvas);
myself.canvas = canvas;
if (button.prev) {
//上一首,按钮创建
var prevBtn = document.createElement('i');
prevBtn.className = "icon-previous";
prevBtn.id = "playPrev";
prevBtn.title = "上一首";
prevBtn.innerHTML = "";
control.appendChild(prevBtn);
//上一首,控制
var playPrev = document.getElementById("playPrev");
playPrev.onclick = function () {
prev();
}
}
if (button.play) {
//播放,暂停,按钮创建
var playBtn = document.createElement('i');
playBtn.className = "icon-play";
playBtn.id = "playControl";
playBtn.title = "播放";
playBtn.innerHTML = "";
playBtn.setAttribute('data', 'pause');
control.appendChild(playBtn);
//播放,暂停,控制
var playControl = document.getElementById("playControl");
playControl.onclick = function () {
play();
}
}
if (button.next) {
//下一首,按钮创建
var nextBtn = document.createElement('i');
nextBtn.className = "icon-next";
nextBtn.id = "playNext";
nextBtn.title = "下一首";
nextBtn.innerHTML = "";
control.appendChild(nextBtn);
//下一首,控制
var playNext = document.getElementById("playNext");
playNext.onclick = function () {
next();
}
}
if (button.volume) {
//按钮与音量控制条容器
var volumeBox = document.createElement('div');
volumeBox.id = "volumeBox";
control.appendChild(volumeBox);
//音量,按钮创建
var volumeBtn = document.createElement('i');
volumeBtn.className = "icon-volume";
volumeBtn.id = "playVolume";
volumeBtn.title = "音量";
if (playBtn) {
playBtn.setAttribute('data', 'normal');
}
volumeBtn.innerHTML = "";
volumeBox.appendChild(volumeBtn);
//音量控制条
var volumeBar = document.createElement('div');
volumeBar.id = "volumeBar";
volumeBox.appendChild(volumeBar);
var volumeSize = document.createElement('div');
volumeSize.id = "volumeSize";
volumeBar.appendChild(volumeSize);
volumeBar.onclick = function (event) {
volumeChange(event, volumeBar, volumeSize);
}
//音量,点击控制,静音-恢复
var volumeBtn = document.getElementById("playVolume");
volumeBtn.onclick = function () {
volume();
}
}
//显示时间容器
playerTime.innerHTML = "- 00:00 / 00:00 0%";
myself.playerTime = playerTime;
//进度条
if (myself.button.progressControl) {
var progress = myself.progress;
progress.style.cursor = "pointer";
progress.onclick = function (event) {
progressControl(event, progress);
}
}
//调用实例化AudioContext
windowAudioContext();
//加载地址方法,audio加入一个初始地址
var playList = myself.playList;
//把列表第一个mp3地址设置到audio上
myself.audio.src = playList[0].mp3;
//歌曲信息,创建
var songTitle = document.createElement('div');
songTitle.id = "songTitle";
songInfo.appendChild(songTitle);
var album = document.createElement('div');
album.id = "album";
songInfo.appendChild(album);
var span = document.createElement('span');
span.innerHTML = '-';
songInfo.appendChild(span);
myself.division = span;
var artist = document.createElement('div');
artist.id = "artist";
songInfo.appendChild(artist);
//记录当前播放在数组里的位置
myself.nowPlay = 0;
//信息设置
updates();
//获取存储音量
myself.audio.volume = volumeGetCookie();
//设置自动播放,开始播放
if (myself.autoPlay) {
play();
}
}
//播放,暂停 控制
function play() {
var playBtn = document.getElementById("playControl");
//播放控制
if (myself.audio.paused) {
var playing = myself.audio.play();
playing.then(function () {
//字符图标变化
if (playBtn) {
playBtn.setAttribute("data", "play");
playBtn.title = "暂停";
playBtn.innerHTML = "";
}
timer = setInterval(function () {
//显示时长
showTime();
//获取就绪状态并处理相应
playerState();
}, 1000);
//播放媒体信息更新
updates();
//处理播放数据,处理过就不再处理
if (myself.handle == 0) {
playHandle();
}
//如果存在提示则移除
var tips = document.getElementsByClassName('visualizer-player-tips');
if (tips.length > 0) {
myself.player.removeChild(tips[0]);
}
}).catch(function () {
//处理浏览器不支持自动播放情况
var tips = document.createElement("div");
tips.className = 'visualizer-player-tips';
tips.innerHTML = '浏览器不支持自动播放,点我开始播放';
tips.onclick = function () {
myself.player.removeChild(tips);
play();
};
myself.player.appendChild(tips);
return false;
})
} else {
myself.audio.pause();
//字符图标变化
if (playBtn) {
playBtn.setAttribute("data", "pause");
playBtn.title = "播放";
playBtn.innerHTML = "";
}
window.clearInterval(timer);
}
//事件传出
myself.event({
eventType: "play",
describe: "播放/暂停",
playing: !myself.audio.paused
});
}
//播放媒体信息更新
function updates() {
var list = myself.playList;
var nowPlay = myself.nowPlay;
var songTitle = document.getElementById("songTitle");
songTitle.innerHTML = list[nowPlay].title;
songTitle.title = "歌曲:" + list[nowPlay].title;
var songAlbum = document.getElementById("album");
var albumTitle = list[nowPlay].album || '';
songAlbum.innerHTML = "(" + (albumTitle) + ")";
songAlbum.style.display = albumTitle ? 'block' : 'none';
songAlbum.title = "所属专辑:" + albumTitle;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0