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 = "&#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);
            //下一首,控制
            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 = "&#xea27;";
            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 = "-&nbsp;00:00&nbsp;/&nbsp;00:00&nbsp;&nbsp;&nbsp;&nbsp;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 = "&#xea1d;";
                }
                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 = "&#xea1c;";
            }
            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