音乐可视化显示效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：音乐可视化显示效果
代码标签：效果
下面为部分代码预览，完整代码请点击下载或在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>HTML5 可视化音乐播放器</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;
            -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;
            background-color: #002878
        }

        #fileWrapper {
            transition: all .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
        }

        .drive,.shadows {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0
        }

        .drive li {
            position: absolute;
            left: 50%;
            top: 50%;
            border: 1px solid rgba(255,255,255,.15);
            box-shadow: 0 1vw 3vw rgba(0,0,0,.5) inset;
            width: 100vw;
            height: 100vh;
            animation: drive 10s linear infinite;
            animation-direction: reverse
        }

        .shadows li {
            position: absolute;
            left: 50%;
            top: 50%;
            background: #000;
            width: 100vw;
            height: 100vh;
            animation: shadows 10s linear infinite;
            animation-direction: reverse;
            list-style-type: none;
            list-style-image: none
        }

        .drive li:nth-child(1) {
            animation-delay: 0
        }

        .drive li:nth-child(2) {
            animation-delay: -1s
        }

        .drive li:nth-child(3) {
            animation-delay: -2s
        }

        .drive li:nth-child(4) {
            animation-delay: -3s
        }

        .drive li:nth-child(5) {
            animation-delay: -4s
        }

        .drive li:nth-child(6) {
            animation-delay: -5s
        }

        .drive li:nth-child(7) {
            animation-delay: -6s
        }

        .drive li:nth-child(8) {
            animation-delay: -7s
        }

        .drive li:nth-child(9) {
            animation-delay: -8s
        }

        .drive li:nth-child(10) {
            animation-delay: -9s
        }

        .shadows li:nth-child(1) {
            animation-delay: 0
        }

        .shadows li:nth-child(2) {
            animation-delay: -1s
        }

        .shadows li:nth-child(3) {
            animation-delay: -2s
        }

        .shadows li:nth-child(4) {
            animation-delay: -3s
        }

        .shadows li:nth-child(5) {
            animation-delay: -4s
        }

        .shadows li:nth-child(6) {
            animation-delay: -5s
        }

        .shadows li:nth-child(7) {
            animation-delay: -6s
        }

        .shadows li:nth-child(8) {
            animation-delay: -7s
        }

        .shadows li:nth-child(9) {
            animation-delay: -8s
        }

        .shadows li:nth-child(10) {
            animation-delay: -9s
        }

@keyframes drive {
            0% {
                transform: translate(-50%,-50%) scale(1.05) rotate(0deg)
            }

            100% {
                transform: translate(-50%,-50%) scale(0) rotate(-45deg)
            }}

@keyframes shadows {
            0% {
                transform: translate(-50%,-50%) scale(1.05) rotate(0deg);
                opacity: 0
            }

            100% {
                transform: translate(-50%,-50%) scale(0) rotate(-45deg);
                opacity: .25
            }}
@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(http://repo.bfw.wiki/bfwrepo/font/icomoon.ttf) format('truetype'),url(http://repo.bfw.wiki/bfwrepo/font/icomoon.woff) format('woff');font-weight:400;font-style:normal
        }

        .visualizer-player [class^=icon-],.visualizer-player [class*=" icon-"] {
            font-family: icomoon!important;
            speak: none;
            font-style: normal;
            font-weight: 400;
            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 .player-control {
            position: absolute;
            height: 32px;
            width: 20%;
            top: 40%;
            margin: 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: #fff
        }

        .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: #fff
        }

        .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
        }

        .visualizer-player .song-info span {
            text-align: center;
            font-weight: 700;
            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;
            -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 {
            from {
                font-size: 12px
            }

            to {
                font-size: 18px
            }}
    </style>
    <script type="text/javascript">
        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; myself.handle = 0; createParts();
            }
            this.change = function(object) {
                myself.effect = object.effect || 0; myself.color = object.color || null; drawSpectrum(myself.analyser);
            }
            function windowAudioContext() {
                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() {
                var audio = document.createElement("AUDIO"); audio.crossOrigin = 'anonymous'; var player = document.getElementsByTagName("player")[0]; player.className = 'visualizer-player'; player.appendChild(audio); 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);
                    }}
                windowAudioContext(); var playList = myself.playList; myself.audio.src = playList[0].mp3; var songTitle = document.createElement('div'); songTitle.id = "songTitle"; songInfo.appendChild(songTitle);.........完整代码请登录后点击上方下载按钮下载查看