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; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0