Recently, I am doing audio playback on mobile terminal, which is presented in the form of round cast graph.

As shown in figure:

Known interface returns:

1. An array of images.

2. A piece of audio, such as MP3

3. A Config array to capture the corresponding time period of each graph: for example: config: [3.691043, 15.150091, 23.904603, 32.310227, 40.448821, 48.691315, 58.746145, 70.646372, 74.762438]

Without further ado, on the code:

The wheel map is a component of the Vant library, and the commented out parts can be used as page numbers.

As requested, audio audio is not displayed, only the progress bar and time can be displayed. The progress bar is also vant’s progress bar, but we need to change its percentage.

So let’s define the variables that we need to use.

// Obtain the duration after the audio load is successful

const showLong = () => { if (audioPlay.value) { duration.value = parseInt(audioPlay.value.duration); }};Copy the code

// Slide the image function

const checkImage = (index) => {
  if (!state.isMove) {
    let ct = (progress.value * duration.value) / 100;
    if (!isNaN(ct)) {
      audioPlay.value.currentTime = ct;
    }
    if (index == 0) {
      curr.value = 0;
      audioPlay.value.currentTime = 0;
    } else {
      audioPlay.value.currentTime = props.config[index - 1];
    }
  }
};
Copy the code

// The following is the processing of the audio progress bar

// Process the time format

Const toTime = (SEC) => {let s = SEC % 60 < 10? "0" + (sec % 60) : sec % 60; let min = Math.floor(sec / 60) < 10 ? "0" + Math.floor(sec / 60) : Math.floor(sec / 60); return min + ":" + s; };Copy the code

Due to a problem encountered in the process of writing, that is, when the normal progress bar is changed, the above will let the wheel cast map scroll the corresponding picture, but when the manual slide wheel cast map, the events affect each other, there is a conflict. So the isMove defined above is used to handle events dynamically. Methods like TouchStart are added just in case.

Const touchStart = () => {state.ismove = false; const touchStart = () => {state. }; const touchmove = () => { state.isMove = false; }; const touchend = (index) => { setTimeout(() => { state.isMove = true; }, state.durationTime); };Copy the code

If necessary, you can add a hand-written play button and click the play control. The dom of VUe3 is written by binding ref to audioPlay, and using Audioplay.value.play () means play, instead of ref of VUe2.

Const Plays = () => {// Play pause control state.status =! state.status; If (is_stop.value) {console.log(" play "); audioPlay.value.play(); } else {console.log(" pause "); audioPlay.value.pause(); } emit("handleNum", 1); };Copy the code

It’s something like that. It’s not very detailed.