前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

作者头像
剽悍一小兔
发布2018-05-17 14:51:41
1K0
发布2018-05-17 14:51:41
举报
文章被收录于专栏:web编程技术分享

Paste_Image.png

这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接。

本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址会在文章最后给出。

为了尽可能保持条理清晰,我就重新开一个页面来说明吧。你把本文的代码拷过去,应该是可以直接运行的。(当然,音乐文件需要换成你本地的)

1. 画一个demo页
代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>音轨和音乐对接</title>
    </head>
    <body>
        
    </body>
</html>

在这个页面的head部分添加一个style块,我就不单独整css文件了,把所有的样式都写在一个页面吧。

给body添加一个线性背景

代码语言:javascript
复制
body {
    background:-webkit-linear-gradient(top,skyblue 0%,#fff 100%) no-repeat;
    background:linear-gradient(top,skyblue 0%,#fff 100%) no-repeat;
}

这个表示从上往下,上面是天蓝色,渐变到下面的纯白色。有一个过渡的效果。

界面:

Paste_Image.png

从图中可以看到,页面上只有顶部有一条蓝色的线,这是因为目前的页面还没有任何东西。这个属性需要你body区域里有实实在在的东西,才能把高度给撑开。

当然,如果你用纯色,不使用 linear-gradient ,就没关系。

比如你直接写:

代码语言:javascript
复制
body {
    background:lightskyblue;
}

效果:

Paste_Image.png

这样就没关系。

OK,继续,我们给body区域添加一个div,作为我们的音轨盒子。

代码语言:javascript
复制
<div class='box'></div>

设置一下他的css样式

代码语言:javascript
复制
.box {
    width: 500px;
    height: 275px;
    background: #666;
    position: relative;
    margin: 100px auto;
}

效果:

Paste_Image.png

这样是不是就有了。

2. 音轨制作

我们还是采用span来制作音轨,具体原理和绘制方法已经在上一节中说明,这里不再赘述,我直接上代码了。

在body下方添加一个script块,里面就写我们的js代码:

代码语言:javascript
复制
<script>
                
</script>

我们设置每一条音轨的宽度为10px。

代码语言:javascript
复制
var box = document.getElementsByTagName('div')[0];  //获取承载音轨的父盒子
var allWidth = box.clientWidth;//获取承载音轨盒子的宽度
var len = (allWidth / 10 );     //计算一共出现多少条音轨 
var html = '';                  //动态拼接音轨
for(var i = 0;i < len ; i ++){
    html+="<span class='item' style='left:"+(i*10)+"px;background:#fff;'></span>";
}

box.innerHTML = html;           //添加音轨

我们先给每一个span添加一个高度,看看效果 css:

代码语言:javascript
复制
.item {
    position:absolute;
    width:10px;
    height:222px;
    left:0px;
    bottom:0px;
    opacity: 0.96;
}

Paste_Image.png

然后,把span的高度设置为0。

好的,音轨盒子差不多就这样了。

3. 用audio标签播放音乐

生成默认的audio对象,然后添加到body区域

代码语言:javascript
复制
var audio = document.createElement('audio');
audio.src = 'mp3/01.mp3'
audio.controls = 'controls';
document.body.appendChild(audio);

css:

代码语言:javascript
复制
audio {
    display: block;
    margin: -100px auto;
    width: 500px;
    border-top: 1px solid;
    border-top-color: #d9dee6;
}

Paste_Image.png

我引入了一首音乐,现在点击播放按钮,就已经可以播放音乐了。

4. 音轨盒子与音乐对接

这部分涉及到很多H5的属性,主要就是一个解析的过程,我就直接贴代码了。

代码语言:javascript
复制
//1:音频上下文
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
/*动画执行的兼容写法*/
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;


//2:初始化音轨对象
var audioContext = new window.AudioContext();

var flag = null; //控制是否解析的开关变量

//拿到播放器去解析音乐文件
var audioBufferSouceNode = audioContext.createMediaElementSource(audio);

audio.onplay = function(){
    flag = true;
    //创建解析对象
    var analyser = audioContext.createAnalyser();
    parse(analyser,function(array){
        console.log(array); //打印解析出来的音轨节点
        for(var i = 0;i < len ; i ++){
            document.getElementsByClassName('item')[i].style.height = array[i] + 'px';
        }
    });
}

audio.onpause = function(){
    for(var i = 0;i < len ; i ++){
        document.getElementsByClassName('item')[i].style.height = 1 + 'px';
    }
    flag = false;
}


function parse(analyser,callback){
    if(!flag){
        return;
    }
    audioBufferSouceNode.connect(analyser); 
    analyser.connect(audioContext.destination);
    var array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);
    if(callback) callback(array);
    requestAnimationFrame(function(){
        parse(analyser,callback);
    });
}

效果:

Paste_Image.png

OK,对接完成了。

我把背景色改了一下,不用渐变色了,还是用纯色吧。

这样就完成了,这算是一个简单版本的。

不过原理都是一样的,我已经把这个音轨对接的代码整合到之前的版本了。

演示站点

您的支持是我写作的最大动力:

嗯,音乐播放器系列到此为止就算是结束了,感谢各位的捧场。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.10.22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 画一个demo页
  • 2. 音轨制作
  • 3. 用audio标签播放音乐
  • 4. 音轨盒子与音乐对接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档