js实现多种可视化音乐播放器效果代码-html代码-BFW代码库

代码语言：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 = "&#xea23;";
            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 = "&#xea1c;";
            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 = "&#xea24;";
            control.appendChild(nextBtn);
      .........完整代码请登录后点击上方下载按钮下载查看