Autojs music dynamic effect

Tooth uncle tutorial is easy to understand

Results show

origin

When watching the video, I think the music effect is particularly good-looking, but the above effect is not as good-looking as the others, so it is a prototype of music effect

The environment

Lightning Simulator: 4.0.63

Android version: 7.1.2

Autojs version: 8.8.20

Train of thought

Read the audio data, format the data, and draw the data on a canvas

Here’s what you’ll learn

• Check and apply for recording permission
• Listen for the result of the permission request
• Basic use of Visualizer
• Canvas painting line
• Music pauses and plays
• Pause and Resume listening interface
• Visualizer Releases resources
• Release mediaPlayer resources
• Filtering is to smooth the data a little bit
• Audio data normalization
• Music playback and monitoring
• Audio data sampling, average sampling
• Random color

The code on

1. Initialize some global variables for easy modification

let currentData;
let currentDataFft;
let mSpectrumCount = 66;
let mItemMargin = 8;
let mediaPlayer;
let kernel = 5;
let visualizer;
Copy the code

2. Apply for the recording permission

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);
Copy the code

3. Check permissions

function checkPermission(permission) {
  let pm = context.getPackageManager();
  return (havePermission =
    PackageManager.PERMISSION_GRANTED == pm.checkPermission(permission, context.getPackageName().toString()));
}
Copy the code

4. The UI interface

  ui.layout(
    <vertical>
      <button id="play">play</button>
      <button id="pause">pause</button>
      <text id="info" textSize="22sp" textColor="#fbfbfe" bg="#00afff" w="*" gravity="center">Tooth tertiary tutorial</text>
      <canvas id="board" h="180dp"></canvas>
      <canvas marginTop="10" id="board2" h="180dp"></canvas>
    </vertical>
  );
Copy the code

5. After loading the interface, draw the music, because you need to use the width and height of the artboard

ui.post(function () {
    let h = ui.board.getHeight();
    initListener(h);
    drawIt(ui.board, "up");
    drawIt(ui.board2, "down");
});
Copy the code

6. Create music data listening events

let dataCaptureListener = new Visualizer.OnDataCaptureListener({
  onWaveFormDataCapture: function (visualizer, waveform, samplingRate) {
    // To waveform data
    let data = converter(waveform);
    currentData = sampling(data, mSpectrumCount);
    currentData = WaveFilter(currentData);
    currentData = WaveFilter(currentData);
  },

  onFftDataCapture: function (visualizer, fft, samplingRate) {
    //FFT data, showing the amplitude of different frequencies
    letdata = converterFft(fft); currentDataFft = samplingFft(data, mSpectrumCount, h); currentDataFft = WaveFilter(currentDataFft); currentDataFft = WaveFilter(currentDataFft); }});Copy the code

7. Visualizer basic configuration

visualizer = new Visualizer(mediaPlayer.getAudioSessionId());
// let visualizer = new Visualizer(0);
// The maximum number of samples
let captureSize = Visualizer.getCaptureSizeRange()[1];
// The sampling frequency
let captureRate = (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);
Copy the code

8. Brush basic configuration

let mPaint = new Paint();
mPaint.setColor(mColor);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setAntiAlias(true);
mPaint.setMaskFilter(new BlurMaskFilter(5, BlurMaskFilter.Blur.SOLID));
Copy the code

9. Change the color of the timer

let colorList = ["#64b5f6"."#2196f3"."#1565c0"];
let step = mSpectrumCount / colorList.length;
setInterval(function () {
  for (var i = 0; i < 3; i++) {
    letcolor = getRandomColor(); colorList[i] = color; }},3000);
Copy the code

10. Draw a line segment

for (let i = step; i < step * 2; i++) {
  let x1 = startPoint.x + i * mSpectrumWidth + halfStrokeWidth;
  let y1 = h;
  let x2 = startPoint.x + i * mSpectrumWidth + halfStrokeWidth;
  let y2;
  if (position === "up") {
    y2 = h - unitY * currentData[i];
  } else {
    y2 = h - currentDataFft[i];
  }
  canvas.drawLine(x1, y1, x2, y2, mPaint); // Draw a line
}
Copy the code

11. Keystroke events

ui.pause.click(function () {
  mediaPlayer.pause();
});
ui.play.click(function () {
  if (mediaPlayer.isPlaying()) {
    return true;
  } else {
    if(mediaPlayer) { mediaPlayer.start(); }}});Copy the code

12. The interface does not display, do not play music, back to the interface to play music

ui.emitter.on("pause".() = > {
  if(mediaPlayer ! =null&& mediaPlayer.isPlaying()) { mediaPlayer.pause(); }}); ui.emitter.on("resume".() = > {
  ui.post(function () {
    mediaPlayer.start();
  }, 200);
});
Copy the code

13. Release resources

events.on("exit".function () {
  visualizer.setEnabled(false);
  visualizer.release();
  mediaPlayer.stop();
  mediaPlayer.release(); // Release the media player when it finishes playing
  mediaPlayer = null;
  print("exit: " + mediaPlayer);
});
Copy the code

reference

Android uses MediaPlayer to play video switch background pause and then resume playback

Android imitation netease Cloud Whale cloud sound effect

Android Visualizer audio Visualizer — Get your audio pumping

Quotes.

Thinking is the most important, other Baidu, Bing, StackOverflow, Android documents, autoJS documents, and finally in the group to ask — fang Shu tutorial

The statement

This tutorial is intended for learning purposes only and is not intended for any other use