预览地址: https://lzh2740128806.github.io/view-music/ https://lzh2740128806.github.io/view-music/
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width">
- <meta charset="UTF-8">
- <title>webaudioapi</title>
- <style>
- html, body{
- margin: 0;
- width: 100%;
- height: 100%;
- background: #DE0;
- }
- .wrap{
- display: flex;
- justify-content: flex-start;
- align-items: center;
- width: 100%;
- height: 100%;
- font-size: 0;
- }
- .wrap span{
- display: block;
- width: 1px;
- height: 0;
- background: #000;
- vertical-align: top;
- }
- .load{
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 999;
- margin: auto;
- width: 100%;
- height: 100%;
- background: rgba(0,0,0,.7);
- text-align: center;
- color: #fff;
- font-size: 35px;
- font-weight: bolder;
- }
- .load:before{
- content: '';
- width: 0;
- height: 100%;
- }
- .load:before, .load span{
- display: inline-block;
- vertical-align: middle;
- }
- </style>
- </head>
- <body>
- <div class="load">
- <span>loading</span>
- </div>
- <div class="wrap"></div>
- <script>
- window.onfocus = function(){
- function creatHTML(){
- var ww = window.innerWidth>=1024? 1024 : window.innerWidth;
- var wrap = document.querySelector('.wrap');
- var str = '';
- for(var j=0; j<ww; j++){
- str += '<span></span>';
- }
- wrap.innerHTML = str;
- }
- creatHTML();
- window.AudioContext = window.AudioContext||window.webkitAudioContext;
- var audiobuffer;
- var source;
- var analyser;
- var context = new AudioContext();
- var spans = document.querySelectorAll('.wrap span');
- // 对音频文件的异步解析
- var request = new XMLHttpRequest();
- request.open('GET', 'https://lzh2740128806.github.io/view-music//summer.mp3', true);
- request.responseType= 'arraybuffer';
- request.onload = function(){
- context.decodeAudioData(request.response,function(buffer){
- audiobuffer = buffer;
- run();
- document.querySelector('.load').remove();
- },function (error) {
- document.querySelector('.load span').innerHTML = '数据加载失败!';
- });
- };
- request.send();
- function run() {
- source = context.createBufferSource();// 音源
- source.buffer = audiobuffer;// 音频数据
- source.connect(context.destination);// 连接到输出源
- source.loop = true;// 开启循环播放
- source.start(0);// 开始播放
- analyser = context.createAnalyser();// 分析器
- source.connect(analyser);// 将音源与分析器连接
- analyser.connect(context.destination);// 将分析器与输出源连接
- draw();
- }
- function draw() {
- var array = new Uint8Array(analyser.frequencyBinCount);
- analyser.getByteFrequencyData(array);
- spans.forEach(function (el, i) {
- el.style.height = array[i] * 2 + 'px';
- });
- requestAnimationFrame(draw);
- }
- window.onfocus = null;
- }
- </script>
- </body>
- </html>
预览地址: https://lzh2740128806.github.io/view-music/index2.html https://lzh2740128806.github.io/view-music/index2.html
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width">
- <meta charset="UTF-8">
- <title>webaudioapi</title>
- <style>
- html, body{
- margin: 0;
- width: 100%;
- height: 100%;
- background: #DE0;
- }
- .load{
- z-index: 999;
- width: 100%;
- height: 100%;
- background: rgba(0,0,0,.7) !important;
- text-align: center;
- color: #fff;
- font-size: 35px;
- font-weight: bolder;
- }
- .load:before{
- content: '';
- width: 0;
- height: 100%;
- }
- .load:before, .load span{
- display: inline-block;
- vertical-align: middle;
- }
- .load, .huan:before, .huan:after, .huan{
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- }
- .huan{
- width: 100px;
- height: 100px;
- background: #333;
- border-radius: 50%;
- box-shadow: 0 0 5px #333;
- }
- .huan:before, .huan:after{
- position: absolute;
- content: '';
- width: 60%;
- height: 60%;
- background: #000;
- border-radius: 50%;
- box-shadow: 0 0 15px #999 inset, 0 0 15px #999;
- }
- .huan:after{
- width: 30%;
- height: 30%;
- }
- </style>
- </head>
- <body>
- <div class="load">
- <span>loading...</span>
- </div>
- <div class="huan"></div>
- <script>
- window.onfocus = function(){
- window.AudioContext = window.AudioContext||window.webkitAudioContext;
- var audiobuffer;
- var source;
- var analyser;
- var context = new AudioContext();
- var huan;
- // 对音频文件的异步解析
- var request = new XMLHttpRequest();
- request.open('GET', 'https://lzh2740128806.github.io/view-music//summer.mp3', true);
- request.responseType= 'arraybuffer';
- request.onload = function(){
- context.decodeAudioData(request.response,function(buffer){
- audiobuffer = buffer;
- run();
- document.querySelector('.load').remove();
- },function (error) {
- });
- };
- request.send();
- function run() {
- source = context.createBufferSource();// 音源
- source.buffer = audiobuffer;// 音频数据
- source.connect(context.destination);// 连接到输出源
- source.loop = true;// 开启循环播放
- source.start(0);// 开始播放
- analyser = context.createAnalyser();// 分析器
- source.connect(analyser);// 将音源与分析器连接
- analyser.connect(context.destination);// 将分析器与输出源连接
- draw();
- }
- function draw() {
- var array = new Uint8Array(analyser.frequencyBinCount);
- analyser.getByteFrequencyData(array);
- huan = 0;
- array.forEach(function (el, i) {
- huan += el;
- });
- huan /= 1024/5;
- document.querySelector('.huan').style.width = huan + 100 + 'px';
- document.querySelector('.huan').style.height = huan + 100 + 'px';
- requestAnimationFrame(draw);
- }
- window.onfocus = null;
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/32244/cb16f3ff47c3c12792a31e27b79051ba.html