Application of micro – app Audio Function Development (CAI) (KENG)

1. Requirements analysis and development plan

1.1 Requirements overview

• Course management: Enter the playing page of a course and get the audio list, but do not play it temporarily.
• Audio management: Click any audio to play on the play page. Can automatically play the next track. Such as this

• Progress control: Supports dragging to modify progress/up/down/pause/play, as shown below.

• Global play: The background audio is displayed at the top of the wechat chat list page when the user temporarily leaves the mini program.

1.2 Development analysis

Well, the question is, how do you implement these requirements?

• The audio control provided by wechat has the default style as shown in the following figure, which is inconsistent with the requirements of the design draft.

• After a personal test in the small program Demo provided by wechat official, if I use audio control, the audio will disappear when I exit the current page, which cannot meet the “global play” required by PM.

1.2.1 backgroundAudioManager profile

Globally unique background audio manager

• Duration: Current audio length, which can be used to initialize the value of the play control.
• CurrentTime: Current playback position, which can be used to update the playback control’s progress value
• Paused: false indicates play and true indicates stop or pause
• SRC: audio source. Note that SRC is automatically played
• Title: Audio title (the audio title “Why children get sick easily in autumn and winter” just displayed at the top of wechat chat list page is set here)

• Play/Pause/Stop/seek: Performs common audio play control. Seek is a method to jump to a specific play progress
• OnPlay/onPause/onStop/onEnded: Responds to a specific event, where onStop is an active stop and onEnded is an automatic end (this can be used for “continuous play”)
• OnTimeUpdate: Background audio playback progress update event that can be combined with the previous currentTime property to update the value of the control.
• OnWaiting/onCanplay: Audio usually doesn’t play immediately, so these two methods can give the user a hint when the audio loads.

1.2.2 Play control

1.2.3 Development scheme determination

• Course management object, responsible for maintaining course information and course audio list, not responsible for playing

• The audio management object, namely backgroundAudioManager, is responsible for managing the playback of audio. Only the changeAudio method has the permission to modify audio

• Play control.

2. Function realization

2.1 Slider control simulation progress

2.1.1 Requirement 1: The control automatically updates with audio playback

<! -- Audio progress control --> <view class="course-control-process"> // Lvalue display currentProcess <text class="current-process">{{currentProcess}}</text> // Progress bar <slider bindchange="hanleSliderChange"// Respond to the drag event bindTouchStart ="handleSliderMoveStart"
      bindtouchend="handleSliderMoveEnd"
      min="0"
      max="{{sliderMax}}"
      activeColor="#8f7df0"
      value="{{sliderValue}}"/> // totalProcess <text class="total-process">{{totalProcess}}</text>
</view> Copy the code

// the formatAudioProcess function is used to format the time 00:15onTimeUpdate() {/ / omit some judgment code self. Page. SetData ({currentProcess: formatAudioProcess (globalBgAudioManager. CurrentTime), sliderValue: Math.floor(globalBgAudioManager.currentTime) }); },Copy the code

## Check if the course is the same, if so, update the progress

if(id ! == globalCourseAudioListManager.getCurrentCourseInfo().id)## Update method
  updateControlsInOldAudio() {/ / get the current audio const currentAudio = globalCourseAudioListManager. GetCurrentAudio (); / / update the progress and control content enclosing setData ({currentProcess: formatAudioProcess (globalBgAudioManager. CurrentTime), sliderValue: formatAudioProcess(globalBgAudioManager.currentTime), sliderMax: Math.floor(currentAudio.duration / 1000) - 1 || 0, totalProcess: formatAudioProcess(currentAudio.duration / 1000 || 0), hasNextAudio: ! globalCourseAudioListManager.isRightEdge() && this.data.hasBuy, hasPrevAudio: ! globalCourseAudioListManager.isLeftEdge() && this.data.hasBuy, paused: globalBgAudioManager.paused, currentPlayingAudioId: currentAudio.audio_id, courseChapterTitle: currentAudio.title }); },Copy the code

2.1.2 Requirement 2: Drag the progress bar to automatically go to a specific location

hanleSliderChange(e) { const position = e.detail.value; this.seekCurrentAudio(position); }, // Drag the progress bar seekCurrentAudio(position) {// Update the progress bar const page = this; // Audio control jump // here is a weird bug: The seek in suspended state cannot change currentTime, need to play after pause const pauseStatusWhenSlide = globalBgAudioManager. Paused;if (pauseStatusWhenSlide) {
      globalBgAudioManager.play();
    }
    
    globalBgAudioManager.seek({
      position: Math.floor(position),
      success: () => {
        page.setData({
          currentProcess: formatAudioProcess(position),
          sliderValue: Math.floor(position)
        });
        if (pauseStatusWhenSlide) {
          globalBgAudioManager.pause();
        }
        console.log(`The process of the audio is now in ${globalBgAudioManager.currentTime}s`); }}); },Copy the code

seek(options) { wx.seekBackgroundAudio(options); // The success callback can be configured}Copy the code

handleSliderMoveStart() {
    this.setData({
      isMovingSlider: true
    });
  },
  handleSliderMoveEnd() {
    this.setData({
      isMovingSlider: false
    });
  }, Copy the code

onTimeUpdate() {// Do not update the progress bar control while movingif(! self.page.data.isMovingSlider) { self.page.setData({ currentProcess: formatAudioProcess(globalBgAudioManager.currentTime), sliderValue: Math.floor(globalBgAudioManager.currentTime) }); } // other ellipses},Copy the code

2.2 backgroundAudioManager Requirements

Where did I set the onTimeupdate method?

this.backgroundAudioManager = wx.getBackgroundAudioManager(); Copy the code

let globalBgAudioManager = app.backgroundAudioManager; Copy the code

this.initBgAudioListManager(); Copy the code

initBgAudioListManager() {// This refers to the function itself at the time of execution, so we need to save this corresponding to Page. const page = this; const self = globalBgAudioManager; Const options = {// options will be covered later}; / / decorateBgAudioListManager function, modify globalBgAudioManager object directly, So as to realize the expansion of method globalBgAudioManager = decorateBgAudioListManager (globalBgAudioManager, options);Copy the code

2.2.1 Requirement 3: Bypass onCanPlay and remind users that audio is loading

const options = {
    onWaiting() {
        wx.showLoading({
          title: 'Audio loading... '
        });
        globalBgAudioManager.isWaiting = true; }},Copy the code

onTimeUpdate() {
    if (self.isWaiting) {
      self.isWaiting = false;
      setTimeout(() => { wx.hideLoading(); }, 300); // 300ms is set to avoid the bad experience caused by the quick Loading of some audio files.Copy the code

2.2.2 Requirement 4: Click an audio to play it

## pages/play/indexOutlineOperation (e) {/ / get audio address const courseAudio = e.c. with our fabrication: urrentTarget. Dataset. The outline | | {}; const targetAudioId = courseAudio.audio_id; // omit a series of validity checks. this.playTargetAudio(targetAudioId); },Copy the code

## pages/play/index@param {*Number} targetAudioId * - Check if the same audio is hit * - Check if the audio is played completely * - If the audio is not played completely, or if the audio is not hit the same audio, * - playTargetAudio(targetAudioId) {const currentAudio = globalCourseAudioListManager.getCurrentAudio(); // There is no need to respond if you click the original audio without stoppingif(targetAudioId === currentAudio.audio_id && !! globalBgAudioManager.currentTime) {return false;
    } else{this.getaudiosrc (targetAudioId).then(() => {// If not suspended, then suspendedif(! globalBgAudioManager.paused) { globalBgAudioManager.pause(); } / / global switching current audio index (at this point hasn't played) globalCourseAudioListManager. ChangeCurrentAudioById (targetAudioId); // Update the current control state, such as the title and length of the new audio. this.updateControlsInNewAudio(); . / / replacement and play background music globalBgAudioManager changeAudio (); }); }},Copy the code

## changeAudio is an options property that is extended into the backgroundAudioManager// Modify the current audiochangeAudio() {/ / access and const {audio_id url, title, content_type_signare_url} = globalCourseAudioListManager. GetCurrentAudio (); const { doctor, name, image } = globalCourseAudioListManager.courseInfo; self.title = title; self.epname = name; self.audioId = audio_id; self.coverImgUrl = image; self.singer = doctor.nickname ||'Lilac Doctor'; // iOS uses content_type_signare_url const SRC = isIOS()? content_type_signare_url : url;if(! src) { showToast({ title:'Audio lost, cannot play',
        icon: 'warn',
        duration: 2000
      });
    } else{ self.src = src; }}Copy the code

• Ask my colleagues in charge of the CDN server at the back end to request resources and cache them before I request the audio SRC address.
• Change the audio address to public.

2.3 Requirements related to courseAudioListManager

## init in app.js
this.courseAudioListManager = createCourseAudioListManager();

## referenced in pages/play/index.js
const globalCourseAudioListManager = app.courseAudioListManager; Copy the code

/ / global switching current audio index (at this point hasn't played) globalCourseAudioListManager. ChangeCurrentAudioById (targetAudioId);Copy the code

changeCurrentAudioById(audioId = -1) {
    this.currentIndex = this.audioList.findIndex(audio => audio.audio_id === audioId);
}, Copy the code

2.3.1 Solve the replay failure by reloading SRC

• First through a series of checks, the following playTargetAudio is triggered

handleStartPlayClickIf () {/ / above omit, globalBgAudioManager. CurrentTime is zerofalseYou think you are clicking on an audio that has already played}else if(! globalBgAudioManager.currentTime) { this.playTargetAudio(currentAudio.audio_id); }else// omit}Copy the code

• Execute getAudioSrc/changeCurrentAudioById/changeAudio in sequence inside playTargetAudio

This.getaudiosrc (targetAudioId).then(() => {// omit // Globally toggle the currently playing audio index globalCourseAudioListManager.changeCurrentAudioById(targetAudioId); / / government / / replacement and play background music globalBgAudioManager. ChangeAudio (); }); }Copy the code

• Inside the getAudioSrc, the main action is to update the new SRC

globalCourseAudioListManager.addAudioSrc(res.items[0]); Copy the code

## Now inside the courseAudioListManagerAddAudioSrc (audioSrcObject) {this.audiolist = this.audiolist.map (audio => {// Forces the audio object with a specific ID to be updated // The new SRC is hidden inside audioSrcObjectif (Number(audio.audio_id) === Number(audioSrcObject.id)) {
          return Object.assign(audio, audioSrcObject, { id: audio.id });
        } else {
          returnaudio; }}); },Copy the code

3. Other experiences

• If the code is too long, don’t use the ternary operators; it’s hard to read.
• Errors may occur in audio playback and need to be caught with onError.
• Finally, welcome to leave a message ~!