This article documents the problems encountered in developing cross-end recording capabilities using the Taro framework

Part ONE: Recording function

The h5 end

H5 end as a result of each browser implementation is not the same, there is a larger difference, the individual to achieve the cost is too high, so direct reference to the community of a mature package, recorder. The package already supports most browsers, as well as wechat public accounts. Support android embedded H5; H5 embedded in ios requires ios native API support.

// Start = () => {this.recorderManager = Recorder({type: 'mp3', sampleRate: 16000, bitRate: 16}) / / need to open the authorization to the recording first enclosing recorderManager. Open (() = > {this. RecorderManager. Start ()})} stop () = = > { Enclosing recorderManager. Stop ((blob, duration) = > {this. RecorderManager. Close ()/recording/release resources, and, of course, can not release, behind can continuous calling start; RecorderManager = null this. RecorderManager = null // revokeObjectURL revokeObjectURL Otherwise occupied memory const audioSrc = (window. URL | | webkitURL). CreateObjectURL (blob)}, err = > {the console. The log (err)})}Copy the code

WeChat

Small program
initRecorderManager = () => { this.recorderManager = Taro.getRecorderManager() const startFunc = () => {} const stopFunc  = res => { const audioSrc = res.tempFilePath || res.apFilePath } const errFunc = err => {} this.recorderManager.onStart(startFunc) this.recorderManager.onStop(stopFunc) this.recorderManager.onError(errFunc) } Start = () => {// There is only one manager globally, and it needs to be reinitialized each time, Otherwise will influence each other when using multiple enclosing initRecorderManager ()} stop () = = > {this. RecorderManager. Stop ()}Copy the code
The public,

This part can directly use recorder package, has supported the public recording function

The inevitable end

Small program
initRecorderManager = () => { this.recorderManager = Taro.getRecorderManager() const startFunc = () => {} const stopFunc = res = > {const audioSrc = res. TempFilePath | | res. ApFilePath} const errFunc = err = > {} / / note that the writing is not the same as WeChat end this.recorderManager.onstart = startFunc this.recorderManager.onstop = stopFunc this.recorderManager.onerror = errFunc } Start = () => {// There is only one manager globally, and it needs to be reinitialized each time, Otherwise will influence each other when using multiple enclosing initRecorderManager ()} stop () = = > {this. RecorderManager. Stop ()}Copy the code
Micro application

Pay attention to

  1. The onRecordEnd method must be called before start. Calls written elsewhere will not take effect
  2. The recording files are put in the nail server, as long as the enterprise is not dissolved, it can be permanently stored
  3. The API invoked requires authorization to use
Start () = = > {/ / listening more than 60 s automatically stop, and must be written in the book before start effective window. Dd. The device. The audio. OnRecordEnd ({onSuccess: res => { const mediaId = res.mediaId }, onFail: Error => {console.log(err)}}) // If you use other cross-end software, you can call the corresponding method taro.startRecord ()} stop = () => {taro.stopRecord ({success: (res: any) => { const mediaId = res.mediaId } }) }Copy the code

Pay treasure to end

The h5 embedded in Alipay WebView does not support recording function, and the official document of Alipay mini program does not provide recording API, but the writing method can refer to the above wechat writing method, which is temporarily available.

Part two: Playback function

The h5 end

H5 end if the use is not taro development, or can refer to the recorder implementation. If developed with taro:

start = () => {
    this.audioManager = Taro.createInnerAudioContext()
    this.audioManager.src = audioSrc
    this.audioManager.play()
}

stop = () => {
    this.audioManager.stop()
}

Copy the code

The inevitable end

Small program

Note:

  1. Call SRC assignment and play at the same time. This will cause playback problems on ios, so do not call play when setting SRC
  2. Ios will be unable to play the file. If it is an MP3 file, you must download it before playing it
  3. For other questions, please refer to this article
start = (url) => {
    this.audioManager = Taro.createInnerAudioContext()
    Taro.downloadFile({
        url,
        success: res => {
            this.audioManager.src = res.filePath || res.apFilePath || res.tempFilePath
        }
    })
}

stop = () => {
    this.audioManager.stop()
}
Copy the code
Micro application

Pay attention to

  1. Android, you must download it to play
start = (id) => {
    window.dd.device.audio.download({
        mediaId: id,
        onSuccess: res => {
            window.dd.device.audio.play({
                localAudioId: res.localAudioId,
            })
        }
    })
}

stop = (id) => {
    window.dd.device.audio.stop({
        localAudioId: id
    })
}
Copy the code

Alipay terminal, wechat terminal

Alipay terminal and wechat terminal play, refer to the above h5 writing method