牙叔教程简单易懂
效果展示
缘起
看视频的时候,觉得人家的音乐动效特别好看,上面这个效果还是没有人家的好看,算个音乐动效雏形吧
环境
雷电模拟器:4.0.63
Android版本:7.1.2
Autojs版本:8.8.20
思路
读取音频数据,格式化数据,再用canvas画数据
你将学到以下知识点
检查及申请录音权限监听申请权限的结果Visualizer的基本使用canvas画线段音乐暂停与播放界面pause和resume的监听visualizer资源释放mediaPlayer资源释放滤波,就是把数据变的平滑一点音频数据归一化音乐播放及监听音频数据采样,平均抽样随机颜色
代码讲解
1.初始化一些全局变量,方便修改
letcurrentData;
letcurrentDataFft;
letmSpectrumCount=66;
letmItemMargin=8;
letmediaPlayer;
letkernel=5;
letvisualizer;
2.申请录音权限
ui.emitter.on(activity_result,(requestCode,resultCode,data)={
log(result);
if(resultCode==activity.RESULT_OK){
log(activity.RESULT_OK);
if(requestCode==6){
log(=6);
init();
}else{
log(!=6);
}
}
});
ActivityCompat.requestPermissions(activity,[android.permission.RECORD_AUDIO],6);
3.检查权限
functioncheckPermission(permission){
letpm=context.getPackageManager();
return(havePermission=
PackageManager.PERMISSION_GRANTED==pm.checkPermission(permission,context.getPackageName().toString()));
}
4.UI界面
ui.layout(
vertical
buttonid=playplay/button
buttonid=pausepause/button
textid=infotextSize=22sptextColor=#fbfbfebg=#00afffw=*gravity=center牙叔教程/text
canvasid=boardh=dp/canvas
canvasmarginTop=10id=board2h=dp/canvas
/vertical
);
5.界面加载完成,再去绘制音乐,因为要用到画板的宽高
ui.post(function(){
leth=ui.board.getHeight();
initListener(h);
drawIt(ui.board,up);
drawIt(ui.board2,down);
});
6.创建音乐数据监听事件
letdataCaptureListener=newVisualizer.OnDataCaptureListener({
onWaveFormDataCapture:function(visualizer,waveform,samplingRate){
//到waveform为波形图数据
letdata=converter(waveform);
currentData=sampling(data,mSpectrumCount);
currentData=WaveFilter(currentData);
currentData=WaveFilter(currentData);
},
onFftDataCapture:function(visualizer,fft,samplingRate){
//FFT数据，展示不同频率的振幅
letdata=converterFft(fft);
currentDataFft=samplingFft(data,mSpectrumCount,h);
currentDataFft=WaveFilter(currentDataFft);
currentDataFft=WaveFilter(currentDataFft);
},
});
7.Visualizer基本配置
visualizer=newVisualizer(mediaPlayer.getAudioSessionId());
//letvisualizer=newVisualizer(0);
//采样的最大值
letcaptureSize=Visualizer.getCaptureSizeRange()[1];
//采样的频率
letcaptureRate=(Visualizer.getMaxCaptureRate()*2)/3;
visualizer.setCaptureSize(captureSize);
visualizer.setDataCaptureListener(dataCaptureListener,captureRate,true,true);
visualizer.setScalingMode(Visualizer.SCALING_MODE_NORMALIZED);
visualizer.setMeasurementMode(Visualizer.MEASUREMENT_MODE_PEAK_RMS);
visualizer.setEnabled(true);
8.画笔基本配置
letmPaint=newPaint();
mPaint.setColor(mColor);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setAntiAlias(true);
mPaint.setMaskFilter(newBlurMaskFilter(5,BlurMaskFilter.Blur.SOLID));
9.定时器修改颜色
letcolorList=[#64b5f6,#f3,#c0];
letstep=mSpectrumCount/colorList.length;
setInterval(function(){
for(vari=0;i3;i++){
letcolor=getRandomColor();
colorList[i]=color;
}
},);
10.绘制线段
for(leti=step;istep*2;i++){
letx1=startPoint.x+i*mSpectrumWidth+halfStrokeWidth;
lety1=h;
letx2=startPoint.x+i*mSpectrumWidth+halfStrokeWidth;
lety2;
if(position===up){
y2=h-unitY*currentData[i];
}else{
y2=h-currentDataFft[i];
}
canvas.drawLine(x1,y1,x2,y2,mPaint);//绘制直线
}
11.按键点击事件
ui.pause.click(function(){
mediaPlayer.pause();
});
ui.play.click(function(){
if(mediaPlayer.isPlaying()){
returntrue;
}else{
if(mediaPlayer){
mediaPlayer.start();
}
}
});
12.界面不显示就不播放音乐,回到界面就播放音乐
ui.emitter.on(pause,()={
if(mediaPlayer!=nullmediaPlayer.isPlaying()){
mediaPlayer.pause();
}
});
ui.emitter.on(resume,()={
ui.post(function(){
mediaPlayer.start();
},);
});
13.释放资源
events.on(exit,function(){
visualizer.setEnabled(false);
visualizer.release();
mediaPlayer.stop();
mediaPlayer.release();//播放完成就释放媒体播放器
mediaPlayer=null;
print(exit:+mediaPlayer);
});
参考
Android使用MediaPlayer播放视频切换后台暂停再恢复互前台继续播放的bug修改
Android仿网易云鲸云音效动效
AndroidVisualizer音频可视化——让你的音频跳动起来
名人名言
思路是最重要的,其他的百度,bing,stackoverflow,安卓文档,autojs文档,最后才是群里问问
---牙叔教程
声明
部分内容来自网络
本教程仅用于学习,禁止用于其他用途