js音乐播放器的实现和可视化

我们试图用本机js编写音乐播放器，以使音频简单可视化.

最终效果如下:

这个想法很明显. 首先，我们想要获取哪些数据以进行可视化音频，如何获取音频？第二，如何形象化，第二个问题比较简单，使用画布进行操作.

您可以使用Web Audio API来获取与音频有关的数据. 在这里，我们可以转到MDN或W3C来查看相关文档.

我们都知道，在网络上播放音频是通过音频标签完成的. Web Audio API是音频标签功能的补充. 它可以:

在一秒钟内同时发出多种声音. 分离音频流并执行复杂的操作. 将音频输出到画布等多个位置，以实现可视化

音频节点具有入口和出口. 多个节点形成类似于链接列表的结构，从一个或多个音频源开始，经过一个或多个处理节点，最后输出到输出节点. Web音频的简单过程如下:

创建AudioContext对象在AudioContext对象中设置音频源音乐播放器 可视化效果，例如标签创建附属节点（效果节点）选择音频的最终输出节点. 效果节点处理完音频后，然后输入到下一个节点

// 获取AudioContext对象
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
// 创建AudioContext对象实例
var actx = new AudioContext();
// 创建AuidoSource，此处的audios为<audio>标签
var audioSrc = actx.createMediaElementSource(audios);
var analyser = actx.createAnalyser();
// 输入的连接
audioSrc.connect(analyser);
// 输出的连接
analyser.connect(actx.destination);
// 本例子中我们获取音高数据来进行可视化
var voiceHigh = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(voiceHigh);

使用画布直观地显示音高数据.

function draw() {
    var step=Math.round(voiceHigh.length/num);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    for(var i=0; i<num; i++) {
	 var value = voiceHigh[step*i];
         ctx.fillColor = color;
	 ctx.fillRect(i * 10 + canvas.width * .5, 250, 7, -value + 1);
         ctx.fillRect(canvas.width * .5 - (i - 1) * 10, 250, 7, -value + 1);
         ctx.fill();
         ctx.fillStyle = colort;
         ctx.fillRect(i * 10 + canvas.width * .5, 250, 7, value + 1);
         ctx.fillRect(canvas.width * .5 - (i - 1) * 10, 250, 7, value + 1);
     }
    requestAnimationFrame(draw);
}

进度条相对简单易行. 我们用一个背景div填充它，另一个div代表当前进度. 宽度动态变化. 将总时间除以当前的音频播放时间，然后乘以背景div的宽度，即可计算出结果.

var bglen = document.getElementById('bgline').offsetWidth;
var fillbar = document.getElementById('fillbar');
fillbar.style.width = parseFloat(cur / duration) * bglen + 'px';

歌词，首先寻找好主意，如何分析歌词？如何控制歌词滚动？如何判断当前使用的歌词？解决了这些问题后，事情变得简单了.

这部分可能是该部分内容中最复杂的部分音乐播放器 可视化效果，并且需要一些简单的算法. 这里使用递归.

分析前的Lrc歌词如下:

[ti:不要在我寂寞的时候说爱我] [ar:郑源] [by:] [00:21.57]柔柔的晚风轻轻吹过 [00:25.39]我的心情平静而寂寞 [00:29.96]当我想忘记爱情去勇敢生活 [00:34.11]是谁到我身边唱起了情歌 [01:48.86][00:39.01]当初的爱情勿匆走过 [01:52.69][00:42.79]除了伤口没留下什么 [01:57.27][00:47.40]你总是在我寂寞流泪的时候 [02:01.67][00:51.80]用你的双臂紧紧抱着我 [02:59.75][02:05.19][00:55.27]不要在我寂寞的时候说爱我 [03:04.15][02:09.69][00:59.96]除非你真的能给予我快乐 [03:09.30][02:14.78][01:04.97]那过去的伤总在随时提醒我 [03:13.94][02:19.40][01:09.65]别再被那爱情折磨 [03:17.17][02:22.65][01:12.82]不要在我哭泣的时候说爱我 [03:21.62][02:27.11][01:17.32]除非你真的不让我难过 [03:25.65][02:31.13][01:21.33]我不想听太多那虚假的承诺 [03:30.00][02:35.44][01:25.69]让我为爱再次后悔犯下的错!

解析后，看起来像这样:

function getnext(y, lrc) {
    var rs = '';
    var i = y + 1;
    if(lrc[i]) {
        t = lrc[i].split(']');
        if(t[1] == '') {
	    rs = getnext(i, lrc);
        }else {
	    rs = t[1]
    }
     }
     return rs;
 }

滚动歌词的最简单方法是保持包含歌词的框的最高值递减，而歌词将上升. 通过比较当前播放时间和歌词时间，判断当前时间对应的歌词，并标记对应的dom.

cur = parseInt(audio.currentTime);
min = parseInt(cur / 60);
sec = parseInt(cur % 60);
sec = sec < 10 ? '0' + sec : sec;
curTime.innerHTML = min + ':' + sec;
fillbar.style.width = parseFloat(cur / duration) * bglen + 'px';
if(lrcTimeArr.indexOf(cur) > -1) {
	document.querySelectorAll('#lrc li').forEach(function(e) {
		e.className = '';
	})
	document.querySelector('#lrc li[time="'+cur+'"]').className = 'active';
	lrcEl.style.top = lrcOffsetTop - lrcTimeArr.indexOf(cur) * 16 + 'px';
}

以上是音乐播放器和可视化的一些实验.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-250840-1.html