## 事情是这样的

### 第一天
小李是一家互联网公司的前端，有一天他闲来无事看到项目的`vue-cli`依赖版本还是`3.0.0-rc`，一股升级依赖的使命感涌上心头
![](https://img-service.csdnimg.cn/img_convert/9bf39e250b772ef89f0512adad2c075a.png)

他看了看[官网的升级文档](https://cli.vuejs.org/migrating-from-v3/)，这么简单，是时候表演真正的技术了
![](https://img-service.csdnimg.cn/img_convert/fcb0d054f9dfe0a95fc270c28b61cfaa.png)

最后发现提示没有`core-js`，然后就随手`npm i core-js -S`了，部署上线，搞定下班回家

### 第二天凌晨2点
>Oh，yeah，今天好运气，老狼请吃鸡，你打电话我不接，你打他有啥用啊~

小李猛然惊醒，这是他为产品专设的铃声，一看时间，**马萨卡**。

接到电话："线上上传不了图片了，你干啥了，昨天还行，快 快 快，快看看"。
伴随着这奇特的词语，小李光速打开电脑一看
![](https://img-service.csdnimg.cn/img_convert/96b23aa7b370d8ed0079d64587a746e7.png)
赶快看看上传组件的代码，没动过啊，内心：
![](https://img-service.csdnimg.cn/img_convert/6d679aae60446e76a114de66a8479a8d.png)

### 凌晨5点
“我搜遍了全网没人碰到这个问题，`OSS is not defined`”,
“我不管，上班前必须修好， 滴 滴 滴 ...”

小李开始了每个月总有那么几天的`bug`修复生活，内心无比抑郁，心情极度暴躁
> 既然是今天发生的是不是因为升级了@vue/cli,回退版本

**老版本可以**，小李内心有点小庆幸,知道了原因可能是因为升级脚手架导致的，但是为什么呢？

他开始梳理上传的逻辑，是按照阿里云官方的方法引入了`aliyun-upload-sdk-1.5.0.min.js`和`aliyun-oss-sdk-5.3.1.min.js`，这没毛病啊为什么`startUpload`就`OSS is not defined`啊，`WDN...`。
他开始对比`package-lock.json`和`package.json`中的依赖项，我什么时候装了`core-js^3.6.5`,卸载,纳尼？ 服务起不来了，**马萨卡**,`@vue/cli^4`依赖了`core-js^3.6.5`? 果然
![](https://img-service.csdnimg.cn/img_convert/041dc262482db194991e01e36ef0053a.png)

这玩意依赖了`core-js`，降级 吧，为啥`@vue/cli4`依赖了`core-js3`呢，为啥阿里云的`sdk`没有兼容`core-js3`呢？

打开阿里云 > 文档 > 反馈: 考虑下`JS`上传`SDK`兼容下`core-js3`?

### 有哪位老铁能给小李一个解释吗？

### 为什么要封装一个音频组件

主要因为微信小程序官方的`audio`不维护了，并且在很多`iOS`真机上确实也存在点击无法播放，总时长不显示等问题.
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC83LzI1LzE3Mzg0ZjgxM2Q3NjNmZGQ?x-oss-process=image/format,png)
### 音频组件的要求与限制
1. **点击播放或者暂停**
2. **显示播放进度及总时长**
3. **通过图标变化显示当前音频所处状态（暂停/播放/加载中）**
4. **页面音频更新时刷新组件状态**
5. **全局有且只有一个音频处于播放状态**
6. **离开页面之后要自动停止播放并销毁音频实例**

### 材料：
[icon_loading.gif](https://img-blog.csdnimg.cn/20200725164330994.gif)
[icon_playing.png](https://img-blog.csdnimg.cn/2020072516441325.png)
[icon_paused.png](https://img-blog.csdnimg.cn/2020072516444587.png)

### InnerAudioContext提供的属性和方法
**属性**:
> string **`src`**: 音频资源的地址，用于直接播放。

> bumber **`startTime`**: 开始播放的位置（单位：s），默认为 0

> boolean **`autoplay`**: 是否自动开始播放，默认为 `false`

> boolean **`loop`**: 是否循环播放，默认为 `false`

> number **`volume`**: 音量。范围 0~1。默认为 1

> number **`playbackRate`**: 播放速度。范围 0.5-2.0，默认为 1。（Android 需要 6 及以上版本）

> number **`duration`**: 当前音频的长度（单位 s）。只有在当前有合法的 src 时返回（只读）

> number **`currentTime`**: 当前音频的播放位置（单位 s）。只有在当前有合法的 src 时返回，时间保留小数点后 6 位（只读）

> boolean **`paused`**: 当前是是否暂停或停止状态（只读）

> number **`buffered`**: 音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲（只读）


**方法**：
> **`play()`**: 播放

> **`pause()`**: 暂停。暂停后的音频再播放会从暂停处开始播放

> **`stop()`**: 停止。停止后的音频再播放会从头开始播放。

> **`seek(postions: number)`**:跳转到指定位置

> **`destory()`**: 销毁当前实例

> **`onCanplay(callback)`**: 监听音频进入可以播放状态的事件。但不保证后面可以流畅播放

> **`offCanplay(callback)`**: 取消监听音频进入可以播放状态的事件

> **`onPlay(callback)`**: 监听音频播放事件

> **`offPlay(callback)`**: 取消监听音频播放事件

> **`onPause(callback)`**: 监听音频暂停事件

> **`offPause(callback)`**: 取消监听音频暂停事件

> **`onStop(callback)`**: 监听音频停止事件

> **`offStop(callback)`**: 取消监听音频停止事件

> **`onEnded(callback)`**: 监听音频自然播放至结束的事件

> **`offEnded(callback)`**: 取消监听音频自然播放至结束的事件

> **`onTimeUpdate(callback)`**: 监听音频播放进度更新事件

> **`offTimeUpdate(callback)`**: 取消监听音频播放进度更新事件

> **`onError(callback)`**: 监听音频播放错误事件

> **`offError(callbcak)`**: 取消监听音频播放错误事件

> **`onWaiting(callback)`**: 监听音频加载中事件。当音频因为数据不足，需要停下来加载时会触发

> **`offWaiting(callback)`**: 取消监听音频加载中事件

> **`onSeeking(callback)`**: 监听音频进行跳转操作的事件

> **`offSeeking(callback)`**: 取消监听音频进行跳转操作的事件

> **`onSeeked(callback)`**: 监听音频完成跳转操作的事件

> **`offSeeked(callback)`**: 取消监听音频完成跳转操作的事件


让我们开始吧🛠

### Taro(React + TS)
 - 首先构建一个简单的jsx结构：
```html 


<View className='custom-audio'>
  <Image onClick={() => this.playOrStopAudio()} src={audioImg} className='audio-btn' />
  <Text>{this.fmtSecond(Math.floor(currentTime))}/{this.fmtSecond(Math.floor(duration))}</Text>
</View>
```
 - 定义组件接受的参数
```javascript
type PageOwnProps = {
  audioSrc: string // 传入的音频的src
}
```
 - 定义`CustomAudio`组件的初始化相关的操作，并给`innerAudioContext`的回调添加一写行为

```javascript
// src/components/widget/CustomAudio.tsx
import Taro, { Component, ComponentClass } from '@tarojs/taro'
import { View, Image, Text } from "@tarojs/components";

import iconPaused from '../../../assets/images/icon_paused.png'
import iconPlaying from '../../../assets/images/icon_playing.png'
import iconLoading from '../../../assets/images/icon_loading.gif'

interface StateInterface {
  audioCtx: Taro.InnerAudioContext // innerAudioContext实例
  audioImg: string // 当前音频icon标识
  currentTime: number // 当前播放的时间
  duration: number // 当前音频总时长
}

class CustomAudio extends Component<{}, StateInterface> {

  constructor(props) {
    super(props)
    this.fmtSecond = this.fmtSecond.bind(this)
    this.state = {
      audioCtx: Taro.createInnerAudioContext(),
      audioImg: iconLoading, // 默认是在加载音频中的状态
      currentTime: 0,
      duration: 0
    }
  }

  componentWillMount() {
    const {
      audioCtx,
      audioImg
    } = this.state
    audioCtx.src = this.props.audioSrc
    // 当播放的时候通过TimeUpdate的回调去更改当前播放时长和总时长（总时长更新放到onCanplay回调中会出错）
    audioCtx.onTimeUpdate(() => {
      if (audioCtx.currentTime > 0 && audioCtx.currentTime <= 1) {
        this.setState({
          currentTime: 1
        })
      } else if (audioCtx.currentTime !== Math.floor(audioCtx.currentTime)) {
        this.setState({
          currentTime: Math.floor(audioCtx.currentTime)
        })
      }
      const tempDuration = Math.ceil(audioCtx.duration)
      if (this.state.duration !== tempDuration) {
        this.setState({
          duration: tempDuration
        })
      }
      console.log('onTimeUpdate')
    })
    // 当音频可以播放就将状态从loading变为可播放
    audioCtx.onCanplay(() => {
      if (audioImg === iconLoading) {
        this.setAudioImg(iconPaused)
        console.log('onCanplay')
      }
    })
    // 当音频在缓冲时改变状态为加载中
    audioCtx.onWaiting(() => {
      if (audioImg !== iconLoading) {
        this.setAudioImg(iconLoading)
      }
    })
    // 开始播放后更改图标状态为播放中
    audioCtx.onPlay(() => {
      console.log('onPlay')
      this.setAudioImg(iconPlaying)
    })
    // 暂停后更改图标状态为暂停
    audioCtx.onPause(() => {
      console.log('onPause')
      this.setAudioImg(iconPaused)
    })
    // 播放结束后更改图标状态
    audioCtx.onEnded(() => {
      console.log('onEnded')
      if (audioImg !== iconPaused) {
        this.setAudioImg(iconPaused)
      }
    })
    // 音频加载失败时 抛出异常
    audioCtx.onError((e) => {
      Taro.showToast({
        title: '音频加载失败',
        icon: 'none'
      })
      throw new Error(e.errMsg)
    })
  }

  setAudioImg(newImg: string) {
    this.setState({
      audioImg: newImg
    })
  }

  // 播放或者暂停
  playOrStopAudio() {
    const audioCtx = this.state.audioCtx
    if (audioCtx.paused) {
      audioCtx.play()
    } else {
      audioCtx.pause()
    }
  }

  fmtSecond (time: number){
    let hour = 0
    let min = 0
    let second = 0
   	if (typeof time !== 'number') {
   	  throw new TypeError('必须是数字类型')
	  } else {
        hour = Math.floor(time / 3600) >= 0 ? Math.floor(time / 3600) : 0,
        min = Math.floor(time % 3600 / 60) >= 0 ? Math.floor(time % 3600 / 60) : 0,
        second = Math.floor(time % 3600 % 60) >=0 ? Math.floor(time % 3600 % 60) : 0
	  }
    }
    return `${hour}:${min}:${second}`
  }
  
  render () {
    const {
      audioImg,
      currentTime,
      duration
    } = this.state
    return(
      <View className='custom-audio'>
        <Image onClick={() => this.playOrStopAudio()} src={audioImg} className='audio-btn' />
        <Text>{this.fmtSecond(Math.floor(currentTime))}/{this.fmtSecond(Math.floor(duration))}</Text>
      </View>
    )
  }
}

export default CustomAudio as ComponentClass<PageOwnProps, PageState>
```

### 问题
乍一看我们的组件已经满足了
1. 点击播放或者暂停
2. 显示播放进度及总时长
3. 通过图标变化显示当前音频所处状态（暂停/播放/加载中）

#### 但是这个组件还有一些问题：
1. 页面卸载之后没有对`innerAudioContext`对象停止播放和回收
2. 一个页面如果有多个音频组件这些组件可以同时播放这会导致音源混乱，性能降低
3. 因为是在`ComponentWillMount`中初始化了`innerAudioContext`的属性所以当`props`中的`audioSrc`变化的时候组件本身不会更新音源、组件的播放状态和播放时长

### 改进
在`componentWillReceiveProps`中增加一些行为达到`props`中的`audioSrc`更新时组件的音源也做一个更新，播放时长和状态也做一个更新
```javascript
componentWillReceiveProps(nextProps) {
  const newSrc = nextProps.audioSrc || ''
  console.log('componentWillReceiveProps', nextProps)
  if (this.props.audioSrc !== newSrc && newSrc !== '') {
    const audioCtx = this.state.audioCtx
    if (!audioCtx.paused) { // 如果还在播放中，先进行停止播放操作
		audioCtx.stop()
	}
    audioCtx.src = nextProps.audioSrc
    // 重置当前播放时间和总时长
    this.setState({
      currentTime: 0,
      duration: 0,
    })
  }
}
```

这时候我们在切换音源的时候就不会存在还在播放旧音源的问题

#### 通过在`componentWillUnmount`中停止播放和销毁`innerAudioContext`达到一个提升性能的目的

```javascript
componentWillUnmount() {
  console.log('componentWillUnmount')
  this.state.audioCtx.stop()
  this.state.audioCtx.destory()
}
```

#### 通过一个全局变量`audioPlaying`来保证全局有且仅有一个音频组件可以处于播放状态

```javascript
// 在Taro中定义全局变量按照一下的规范来，获取和更改数据也要使用定义的get和set方法，直接通过Taro.getApp()是不行的
// src/lib/Global.ts
const globalData = {
  audioPlaying: false, // 默认没有音频组件处于播放状态
}

export function setGlobalData (key: string, val: any) {
  globalData[key] = val
}

export function getGlobalData (key: string) {
  return globalData[key]
}
```

#### 我们通过封装两个函数去判断是否可以播放当前音源：`beforeAudioPlay`和`afterAudioPlay`

```javascript
// src/lib/Util.ts
import Taro from '@tarojs/taro'
import { setGlobalData, getGlobalData } from "./Global";

// 每次在一个音源暂停或者停止播放的时候将全局标识audioPlaying重置为false，用以让后续的音频可以播放
export function afterAudioPlay() {
  setGlobalData('audioPlaying', false)
}

// 在每次播放音频之前检查全局变量audioPlaying是否为true，如果是true，当前音频不能播放，需要之前的音频结束或者手动去暂停或者停止之前的音频播放，如果是false，返回true，并将audioPlaying置为true
export function beforeAudioPlay() {
  const audioPlaying = getGlobalData('audioPlaying')
  if (audioPlaying) {
    Taro.showToast({
      title: '请先暂停其他音频播放',
      icon: 'none'
    })
    return false
  } else {
    setGlobalData('audioPlaying', true)
    return true
  }
}
```

#### 接下来我们改造之前的`CustomAudio`组件

```javascript
import { beforeAudioPlay, afterAudioPlay } from '../../lib/Utils';

/* ... */
// 因为组件卸载导致的停止播放别忘了也要改变全局audioPlaying的状态
componentWillUnmount() {
  console.log('componentWillUnmount')
  this.state.audioCtx.stop()
  this.state.audioCtx.destory()
  ++ afterAudioPlay()
}

/* ... */
// 每次暂停或者播放完毕的时候需要执行一次afterAudioPlay()让出播放音频的机会给其他的音频组件
audioCtx.onPause(() => {
  console.log('onPause')
  this.setAudioImg(iconPaused)
  ++ afterAudioPlay()
})
audioCtx.onEnded(() => {
  console.log('onEnded')
  if (audioImg !== iconPaused) {
    this.setAudioImg(iconPaused)
  }
  ++ afterAudioPlay()
})

/* ... */

// 播放前先检查有没有其他正在播放的音频，没有的情况下才能播放当前音频
playOrStopAudio() {
  const audioCtx = this.state.audioCtx
  if (audioCtx.paused) {
    ++ if (beforeAudioPlay()) {
      audioCtx.play()
    ++ }
  } else {
    audioCtx.pause()
  }
}

```

### 最终代码

```javascript
// src/components/widget/CustomAudio.tsx
import Taro, { Component, ComponentClass } from '@tarojs/taro'
import { View, Image, Text } from "@tarojs/components";
import { beforeAudioPlay, afterAudioPlay } from '../../lib/Utils';

import './CustomAudio.scss'
import iconPaused from '../../../assets/images/icon_paused.png'
import iconPlaying from '../../../assets/images/icon_playing.png'
import iconLoading from '../../../assets/images/icon_loading.gif'

type PageStateProps = {
}

type PageDispatchProps = {
}

type PageOwnProps = {
  audioSrc: string
}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface CustomAudio {
  props: IProps
}

interface StateInterface {
  audioCtx: Taro.InnerAudioContext
  audioImg: string
  currentTime: number
  duration: number
}

class CustomAudio extends Component<{}, StateInterface> {

  constructor(props) {
    super(props)
    this.fmtSecond = this.fmtSecond.bind(this)
    this.state = {
      audioCtx: Taro.createInnerAudioContext(),
      audioImg: iconLoading,
      currentTime: 0,
      duration: 0
    }
  }

  componentWillMount() {
    const {
      audioCtx,
      audioImg
    } = this.state
    audioCtx.src = this.props.audioSrc
    // 当播放的时候通过TimeUpdate的回调去更改当前播放时长和总时长（总时长更新放到onCanplay回调中会出错）
    audioCtx.onTimeUpdate(() => {
      if (audioCtx.currentTime > 0 && audioCtx.currentTime <= 1) {
        this.setState({
          currentTime: 1
        })
      } else if (audioCtx.currentTime !== Math.floor(audioCtx.currentTime)) {
        this.setState({
          currentTime: Math.floor(audioCtx.currentTime)
        })
      }
      const tempDuration = Math.ceil(audioCtx.duration)
      if (this.state.duration !== tempDuration) {
        this.setState({
          duration: tempDuration
        })
      }
      console.log('onTimeUpdate')
    })
    // 当音频可以播放就将状态从loading变为可播放
    audioCtx.onCanplay(() => {
      if (audioImg === iconLoading) {
        this.setAudioImg(iconPaused)
        console.log('onCanplay')
      }
    })
    // 当音频在缓冲时改变状态为加载中
    audioCtx.onWaiting(() => {
      if (audioImg !== iconLoading) {
        this.setAudioImg(iconLoading)
      }
    })
    // 开始播放后更改图标状态为播放中
    audioCtx.onPlay(() => {
      console.log('onPlay')
      this.setAudioImg(iconPlaying)
    })
    // 暂停后更改图标状态为暂停
    audioCtx.onPause(() => {
      console.log('onPause')
      this.setAudioImg(iconPaused)
      afterAudioPlay()
    })
    // 播放结束后更改图标状态
    audioCtx.onEnded(() => {
      console.log('onEnded')
      if (audioImg !== iconPaused) {
        this.setAudioImg(iconPaused)
      }
      afterAudioPlay()
    })
    // 音频加载失败时 抛出异常
    audioCtx.onError((e) => {
      Taro.showToast({
        title: '音频加载失败',
        icon: 'none'
      })
      throw new Error(e.errMsg)
    })
  }

  componentWillReceiveProps(nextProps) {
  	const newSrc = nextProps.audioSrc || ''
	console.log('componentWillReceiveProps', nextProps)
	if (this.props.audioSrc !== newSrc && newSrc !== '') {
	  const audioCtx = this.state.audioCtx
	  if (!audioCtx.paused) { // 如果还在播放中，先进行停止播放操作
		audioCtx.stop()
	  }
	  audioCtx.src = nextProps.audioSrc
	  // 重置当前播放时间和总时长
	  this.setState({
	    currentTime: 0,
	    duration: 0,
	  })
	}
  }

  componentWillUnmount() {
	console.log('componentWillUnmount')
	this.state.audioCtx.stop()
	this.state.audioCtx.destory()
	afterAudioPlay()
  }

  setAudioImg(newImg: string) {
    this.setState({
      audioImg: newImg
    })
  }

  playOrStopAudio() {
    const audioCtx = this.state.audioCtx
    if (audioCtx.paused) {
      if (beforeAudioPlay()) {
        audioCtx.play()
      }
    } else {
      audioCtx.pause()
    }
  }

  fmtSecond (time: number){
    let hour = 0
    let min = 0
    let second = 0
   	if (typeof time !== 'number') {
   	  throw new TypeError('必须是数字类型')
	  } else {
        hour = Math.floor(time / 3600) >= 0 ? Math.floor(time / 3600) : 0,
        min = Math.floor(time % 3600 / 60) >= 0 ? Math.floor(time % 3600 / 60) : 0,
        second = Math.floor(time % 3600 % 60) >=0 ? Math.floor(time % 3600 % 60) : 0
	  }
    }
    return `${hour}:${min}:${second}`
  }

  render () {
    const {
      audioImg,
      currentTime,
      duration
    } = this.state
    return(
      <View className='custom-audio'>
        <Image onClick={() => this.playOrStopAudio()} src={audioImg} className='audio-btn' />
        <Text>{this.fmtSecond(Math.floor(currentTime))}/{this.fmtSecond(Math.floor(duration))}</Text>
      </View>
    )
  }

}

export default CustomAudio as ComponentClass<PageOwnProps, PageState>
```
#### 提供一份样式文件，也可以自己自行发挥

```css
// src/components/widget/CustomAudio.scss
.custom-audio {
  border-radius: 8vw;
  border: #CCC 1px solid;
  background: #F3F6FC;
  color: #333;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 2vw;
  font-size: 4vw;
  .audio-btn {
    width: 10vw;
    height: 10vw;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
```
### 最终效果~
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200725184319415.gif)

*★,°*:.☆(￣▽￣)/$:*.°★* 。完美*★,°*:.☆(￣▽￣)/$:*.°★* 。🎉🎉🎉

有什么好的建议大家可以在评论区跟我讨论下哈，别忘了点赞收藏分享哦，下期就更`uni-app`版本的~

# 原由
起初是在`WSL`中开发一个静态博客项目，想要偷个懒，想直接通过`fs.stat()`获取文件的创建时间来生成文章的时间线排序，包括更新时间

# 不对劲
当我更改了一个`md`文件的内容时，我发现时间线发生变化了，我是通过`(await fs.stat(filePath)).birthtimeMs`获取文件创建时间的，但是我发现这个值竟然在我改动过文件后变化了，变成了我改变文件的时间戳，白丝不の七姐（bushi）

# 找原因
通过`stat`命令一查看，我惊呆了，文件的`Birth`竟然是`-`，你没看错就是一个杠
```bash
  Size: 2477            Blocks: 8          IO Block: 4096   regular file
Device: 810h/2064d      Inode: 148374      Links: 1
Access: (0644/-rw-r--r--)  Uid: ( 1000/     ldl)   Gid: ( 1000/     ldl)
Access: 2021-11-08 16:35:59.405414600 +0800
Modify: 2021-10-28 09:36:18.918000000 +0800
Change: 2021-10-28 09:36:18.913397200 +0800
 Birth: -
```
各种让我一通找之后，起初以为是`WSL`下的文件系统的问题，具体可以查看`github`上别人19年的时候提的一个`issue`:[stat.birthtime is incorrect under WSL · Issue #30860 · nodejs/node (github.com)](https://github.com/nodejs/node/issues/30860),后来发现不对，在我的Ubuntu服务器上也是一样的现象，属实给我惊呆了，后来看到论坛有人说只要是基于`Debian`的发行版的，都无法拿到文件的准确的创建时间；还有一种方法：拿到`Ext4`文件系统的`crtime`获取到创建时间：步骤是先用`ls -i`拿到文件的`inode`，然后`df .`查看当前挂载位置`/dev/vda1`,最后通过`sudo debugfs -R 'stat <inode> /dev/vda1`查看文件的`crtime`,vim改了下文件，一看还是跟着四个`time`全变，无解了！

本人测试在`win`上和基于`arch`的`manjaro`的是正常的。

# 总结
还是老老实实在`win`上开发吧,不要用`Ubuntu`，也可以用`manjaro`，真的无奈gym！

### 能力依赖
> [RecorderManager](https://developers.weixin.qq.com/miniprogram/dev/api/media/recorder/RecorderManager.html) 全局唯一的录音管理器

### 录音功能的要求与限制
- 与当前页面其他**音频播放/录音**功能互斥
- 是否在录音中状态显示
- 结束/不需要录音时，回收`RecorderManager`对象

### 材料
[可以/结束 录音](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c33f20130d54ee4931cd6823c601787~tplv-k3u1fbpfcp-zoom-1.image)
[录音中](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/903e312578c04f3e89e3abc7d6cc1423~tplv-k3u1fbpfcp-zoom-1.image)

### Codeing（结果代码直接看最后）

#### 构造一个简单的`DOM`结构
```html
<image @click="recordAction" :src="recordImg" class="record"/>
```

#### 先实现小程序的录音功能

```javascript
import iconRecord from '../../static/images/icon_record.png'
import iconRecording from '../../static/images/icon_recording.png'
// ...
data() {
  recordImg: iconRecord, // 录音按钮的图标
  rm: null, // 录音管理器
},
// ...
mounted() {
  if (this.rm === null) { // 录音管理器如果没有初始化就先初始化
    this.rm = uni.getRecorderManager()
  }
  // 绑定回调方法
  this.rm.onStart((e) => this.onStart(e))
  this.rm.onPause((e) => this.onPause(e))
  this.rm.onResume((e) => this.onResume(e))
  this.rm.onInterruptionBegin((e) => this.onInterruptionBegin(e))
  this.rm.onInterruptionEnd((e) => this.onInterruptionEnd(e))
  this.rm.onError((e) => this.onError(e))
},
// ...
methods: {
  // ...
  recordAction() {
    if (this.recordImg === iconRecord) {
      // 设置格式为MP3，最长60S，采样率22050
      this.rm.start({
        duration: 600000,
        format: 'mp3',
        sampleRate: 22050,
      })
      // 开始录音后绑定停止录音的回调方法
      this.rm.onStop((e) => this.onStop(e))
    } else if (this.recordImg === iconRecording) {
      this.rm.stop()
    },
  },
  onStart(e) {
    console.log('开始录音', this.question, this.subQuesIndex)
    this.recordImg = iconRecording
    console.log(e)
  },
  onPause(e) {
    console.log(e)
    afterAudioRecord()
  },
  onResume(e) {
    console.log(e)
  },
  onStop(e) {
    console.log(e)
    this.recordImg = iconRecord
    // 结束录音之后上传录音
    this.uploadMp3Action(e)
  },
  onInterruptionBegin(e) {
    console.log(e)
  },
  onInterruptionEnd(e) {
    console.log(e)
  },
  onError(e) {
    console.log(e)
  },
  uploadMp3Action(e) {
  	// TODO uploadMp3
  },
},
```

#### 只能同时有一个录音，与音频播放互斥
- `globalData`中增加两个属性`audioPlaying`，`audioRecording`
```javascript
// src/App.vue
export default {
  globalData: {  
    // 保证全局只有一个音频处于播放状态且录音与播放操作互斥
    audioPlaying: false,
    audioRecording: false,
  },
  // ...
}, 
```

- `Util`中增加判断方法

```javascript
// src/lib/Util.js
// 结束录音之后释放录音能力
export function afterAudioRecord() {
  getApp().globalData.audioRecording = false
}
// 结束音频播放之后释放音频播放能力
export function afterAudioPlay() {
  getApp().globalData.audioPlaying = false
}

/**
 * 判断是否可以录音或者播放
 * @param {string} type play | record
 */
export function beforeAudioRecordOrPlay(type) {
  const audioPlaying = getApp().globalData.audioPlaying
  const audioRecording = getApp().globalData.audioRecording
  if (audioPlaying ||audioRecording) {
    uni.showToast({
      title: audioPlaying ? '请先暂停其他音频播放' : '请先结束其他录音',
      icon: 'none'
    })
    return false
  } else {
    if (type === 'play') {
      getApp().globalData.audioPlaying = true
    } else if (type === 'record') {
      getApp().globalData.audioRecording = true
    } else {
      throw new Error('type Error', type)
    }
    return true
  }
}
```

- 改造原有`recordAction`方法
```javascript
import { beforeAudioRecordOrPlay, afterAudioRecord} from '../../lib/Utils';
// ...
recordAction() {
-  if (this.recordImg === iconRecord) {
+  if (this.recordImg === iconRecord && beforeAudioRecordOrPlay('record')) {
	// 设置格式为MP3，最长60S，采样率22050
    this.rm.start({
      duration: 600000,
      format: 'mp3',
      sampleRate: 22050,
    })
    // 开始录音后绑定停止录音的回调方法
    this.rm.onStop((e) => this.onStop(e))
  } else if (this.recordImg === iconRecording) {
    this.rm.stop()
+   afterAudioRecord()
  },
},
```

> 这样就避免了多次录音

#### 小程序录音上传
补全我们的`uploadMp3Action`方法，我们使用`uni-app`的`uni.uploadFile()`方法来上传录音文件
```javascript
uploadMp3Action(e) {
  const filePath = e.tempFilePath
  const option = {
    url: 'xxx',
    filePath,
    header,
    formData: {
      filePath
    },
    name: 'audio',
  }
  uni.showLoading({
    title: '录音上传中...'
  })
  return await uni.uploadFile(option)
  uni.hideloading()
}
```

#### 最后在页面卸载的时候回收`RecorderManager`对象
```javascript
beforeDestroy() {
  this.rm = null
}
```

### 打完收工~

### 原由
同样的是因为小程序官方不维护`audio`组件了

### 音频组件的要求与限制
1. 点击播放或者暂停
2. 显示播放进度及总时长
3. 通过图标变化显示当前音频所处状态（暂停/播放/加载中）
4. 页面音频更新时刷新组件状态
5. 全局有且只有一个音频处于播放状态
6. 离开页面之后要自动停止播放并销毁音频实例

### [材料/属性/方法](https://juejin.im/post/6854573218846638093#heading-2)
让我们开始吧🛠

### uni-app Vue
- 同样的先构造`DOM`结构
```html
<view class="custom-audio">
  <image v-if="audioSrc !== undefined && audioSrc !== null && audioSrc !== ''" @click="playOrStopAudio" :src="audioImg" class="audio-btn" />
  <text v-else @click="tips" class="audio-btn">无音源</text>
  <text>{{ fmtSecond(currentTime) }}/{{ fmtSecond(duration) }}</text>
</view>
```

- 定义接受的组件

```javascript
props: {
  audioSrc: {
    type: String,
    default: ''
  },
},
```
- 定义`CustomAudio`组件的初始化相关的操作，并给`innerAudioContext`的回调添加一些行为（之前[Taro那篇](https://juejin.im/post/6854573218846638093#heading-5)我们踩过的坑这里就直接上代码了）
```javascript
import { formatSecondToHHmmss, afterAudioPlay, beforeAudioRecordOrPlay } from '../../lib/Utils'
const iconPaused = '../../static/images/icon_paused.png'
const iconPlaying = '../../static/images/icon_playing.png'
const iconStop = '../../static/images/icon_stop.png'
const iconLoading = '../../static/images/icon_loading.gif'
// ...
data() {
  return {
    audioCtx: null, // 音频上下文
    duration: 0, // 音频总时长
    currentTime: 0, // 音频当前播放的时长
    audioImg: iconLoading, // 默认状态为加载中
  }
},
watch: {
  audioSrc: {
    handler(newSrc, oldSrc) {
      console.log('watch', newSrc, oldSrc)
      this.audioImg = iconLoading
      this.currentTime = 0
      this.duration = 0
      if (this.audioCtx === undefined) {
        this.audioCtx = uni.createInnerAudioContext()
        this.onTimeUpdate = this.audioCtx.onTimeUpdate
        this.bindAuidoCallback(this.audioCtx)
      } else {
        this.audioCtx.src = newSrc
      }
      if (this.audioCtx.play) {
        this.audioCtx.stop()
        getApp().globalData.audioPlaying = false
      }
    }
  }
},
mounted() {
  this.audioCtx = uni.createInnerAudioContext()
  this.audioCtx.src = this.audioSrc
  this.audioCtx.startTime = 0
  this.bindAuidoCallback(this.audioCtx)
},
methods: {
  bindAuidoCallback(ctx) {
    ctx.onTimeUpdate((e) => {
      this.onTimeUpdate(e)
    })
    ctx.onCanplay((e) => {
      this.onCanplay(e)
    })
    ctx.onWaiting((e) => {
      this.onWaiting(e)
    })
    ctx.onPlay((e) => {
      this.onPlay(e)
    })
    ctx.onPause((e) => {
      this.onPause(e)
    })
    ctx.onEnded((e) => {
      this.onEnded(e)
    })
    ctx.onError((e) => {
      this.onError(e)
    })
  },
  tips(){
    uni.showToast({
      title: '无效音源,请先录音',
      icon: 'none'
    })
  },
  playOrStopAudio() {
    if (this.audioCtx === null) {
      this.audioCtx = uni.createInnerAudioContext()
      this.audioCtx.src = this.audioSrc
      this.bindAuidoCallback(this.audioCtx)
    }
    if (this.audioCtx.paused) {
      if (beforeAudioRecordOrPlay('play')) {
        this.audioCtx.play()
        this.audioImg = iconPlaying
      }
    } else {
      this.audioCtx.pause()
      afterAudioPlay()
      this.audioImg = iconPaused
    }
  },
  onTimeUpdate(e) {
    console.log('onTimeUpdate', this.audioCtx.duration, this.audioCtx.currentTime)
    if (this.audioCtx.currentTime > 0 && this.audioCtx.currentTime <= 1) {
      this.currentTime = 1
    } else if (this.currentTime !== Math.floor(this.audioCtx.currentTime)) {
      this.currentTime = Math.floor(this.audioCtx.currentTime)
    }
    const duration = Math.floor(this.audioCtx.duration)
    if (this.duration !== duration) {
      this.duration = duration
    }
  },
  onCanplay(e) {
    if (this.audioImg === iconLoading) {
      this.audioImg = iconPaused
    }
    console.log('onCanplay', e)
  },
  onWaiting(e) {
    if (this.audioImg !== iconLoading) {
      this.audioImg = iconLoading
    }
  },
  onPlay(e) {
    console.log('onPlay', e, this.audioCtx.duration)
    this.audioImg = iconPlaying
    if (this.audioCtx.duration > 0 && this.audioCtx.duration <= 1) {
      this.duration = 1
    } else {
      this.duration = Math.floor(this.audioCtx.duration)
    }
  },
  onPause(e) {
    console.log('onPause', e)
    this.audioImg = iconPaused
  },
  onEnded(e) {
    console.log('onEnded', e)
    if (this.audioImg !== iconPaused) {
      this.audioImg = iconPaused
    }
    afterAudioPlay()
  },
  onError(e) {
    uni.showToast({
      title: '音频加载失败',
      icon: 'none'
    })
    throw new Error(e.errMsg, e.errCode)
  },
  fmtSecond(sec) {
    const { min, second } = formatSecondToHHmmss(sec)
    return `${min}:${second}`
  }
},
```
### 同样的`scss`文件
```css
<style lang="scss" scoped>
.custom-audio {
  border-radius: 8vw;
  border: #CCC 1px solid;
  background: #F3F6FC;
  color: #333;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 2vw;
  font-size: 14px;
  .audio-btn {
    width: 10vw;
    height: 10vw;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
```

### 最后
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9wNi1qdWVqaW4uYnl0ZWltZy5jb20vdG9zLWNuLWktazN1MWZicGZjcC81NzBkZjgxZDUyNjc0ZWFhODYyYjhjOTNhYWFlZGEyMn50cGx2LWszdTFmYnBmY3Atem9vbS0xLmltYWdl?x-oss-process=image/format,png)

各位有遇到什么问题或有什么建议的可以跟我讨论哟~

### 缘由
昨天测试给我的小程序提了一个bug，说：‘我怎么滑动弹出后的这个列表后面的列表也会跟着滑动啊，这很奇快诶’，我：‘我修复一下’。
#### 造成问题的场景
是一个**数据列表页**，通过**触底上滑**加载数据

所以我把**页面最外层**的`view`加了一个`min-height: '100vh'`让这个列表**可以自动增加高度进行扩容**

这个列表页有**很多筛选条件或者说是筛选项**，我做了一个**有背景遮罩层的弹出组件**，把这些**筛选项塞进去**，最外层的`view`给了一个`max-height: 85vh; overflow: scroll；`让它也可以在数据很多的时候**滑动去选择**某一个筛选项

**注意问题就来了**：如果弹出的筛选组件和数据列表的数据都多到超出了上述的`85vh 100vh`这时候如果滑动弹出的筛选列表`touchmove`事件就会在两个列表上同时触发，表现为**当上层列表触底或者触顶时，如果底层列表为触底或者未触顶**，就会触发底层的`touchmove`事件，就会滑动背景，也就是老生常谈的**滑动穿透**，既然找出问题发生的原因了，现在我们就开始解决吧🔨

#### 百度大法好不好？
###### 小程序端
有人说给底层列表增加一个`catchtouchmove='true'`,但这种情况下直接页面都不能滑动了，我又看到很多说给底层的列表放到[**scroll-view**](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)里面然后设置`scroll-y='true'`，通过scoll-view的事件去加载数据，但是`scroll-view`性能在列表数据特别多的时候会有折扣，这个先不谈，据本人尝试，这种方式并不奏效，可能我的姿势不对，有哪位仁兄有解决过的可以来探讨一下，欢迎留言~~

###### web端
推荐直接使用[tua-body-scroll-lock](https://github.com/tuateam/tua-body-scroll-lock/blob/HEAD/README-zh_CN.md),可以比较完美的解决这个问题。

### 祭出我的大杀器
其实我们改变一下思路问题就迎刃而解了
首先明确我们的需求：**最上层的列表滑动的时候下面的列表不能滑动**
简单啊：
我们是可以在底层的页面上监听到上层的列表有没有显示的：当上层列表展示的时候，给到底层的`view`一个`overflow: hidden;hight: 100vh`的样式，当上层隐藏的时候取消这个样式

亲测完美解决*★,°*:.☆(￣▽￣)/$:*.°★* 。

### Array.fill的具体定义请看[这里](https://es6.ruanyifeng.com/#docs/array#%E6%95%B0%E7%BB%84%E5%AE%9E%E4%BE%8B%E7%9A%84-fill)
这个方法在平时的开发中有事提供了很大的便利，但是有一个细节容易被忽略，造成貌似看起来很诡异的bug
比如你生成了10个内容为`{hasMore: false}`
```javascript
let states = Array.fill({hasmore: false})
```
你想去动态改变其中某一项的值，你会发现整个数组里面的值全都变化了，这是因为你忽略了这个方法的一个注意事项：

> **如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。**

所以尽量的不要填充对象类型，因为生成的n个数组成员其实都是指向同一个对象的，这种情况下要么填充基本类型的值要么去做一个深拷贝的，但是如果必须考虑后者，那对于使用这个`Array.fill`这个方法去解决一个问题的决定就不那么明智了，所以这里还是推荐使用基本变量填充。

### 环境：
Nuxt + gasp 最终打包成静态文件的方式

#### 报错具体情况：
官方给的案例中是这样引入的
```javascript
import { TimelineLite } from 'gsap'
```
如果你是用Nuxt在**npm run start**或 **npm run dev**的方式的话 不会有任何问题，但是如果你编译为静态文件也就是**npm run generate**,这里就会报 `cannot assign to read only property 'y' of object '#<htmlimageelement>'`的错误

### 解决方式：
```javascript
import { TimelineLite } from 'gsap/dist/gsap'
```
[原理: 根据官网的插件建议](https://greensock.com/forums/topic/23007-importing-plugins-in-nuxt/?tab=comments#comment-108592)


## 这是个什么bug
------
### 声明
我是为了尝鲜,初始化`uni-app`项目的时候指定的`vue3`版本，这个`vue3`版本的官方还没有加入到正式版，大家项目中还是用`vue2`的赖。如果有同学也想学习一下可以按照官方的使用`cli`来创建项目`vue create -p dcloudio/uni-preset-vue#vue3 your-project-name`

有一个列表页面，大概长下面这样：
![image.png](https://img-blog.csdnimg.cn/img_convert/f38a9f3f551e9d49812a90e5f51a58dc.png)
列表中是一个组件通过`v-for`循环渲染的数据像下面这样：
```html
<div v-if="list.length > 0" class="list-wrap">
  <AccPswordCard
    v-for="(accPsword, i) in list"
    :key="i"
    :index="i"
    :accPsword="accPsword"
    @deleteCB="deleteCB"
  />
</div>
```
问题就在于我在`AccPswordCard.vue`组件里面去删除当前元素然后通知父组件更新数据重新渲染的时候出现了问题，这个代码中删除的逻辑是这样的：
```typescript
// 子组件AccPswordCard.vue
props: {
  accPsword: {
    type: Object as PropType<AccountPasswordType>,
    required: true,
  },
  index: {
    type: Number,
    required: true,
  },
},
emits: ["deleteCB"],
setup() {
  function deleteAP(index: number) {
    uni.showModal({
      title: "提示",
      content: `确定要删除：${name.value} 这项密码吗？删除后不可恢复！`,
      confirmText: "删除",
      confirmColor: "red",
      success(res) {
        if (res.confirm) {
          // 删除的请求
          deleteAccPsword(id.value).then(({ successStatus }) => {
            if (successStatus) {
              ctx.emit("deleteCB", index); // 在这里emit父组件的回调方法，把当前数据的索引传过去
              uni.showToast({
                icon: "success",
                title: "删除成功",
              });
          });
        }
      },
    });
  }
}

// 父组件中的方法
function deleteCB(index: number) {
  const deleteData = list.value.splice(index, 1);
  console.log("delete index: ", index, deleteData);
}
```
看这段逻辑应该没毛病吧，看效果：

![eg.gif](https://img-blog.csdnimg.cn/img_convert/9235da7a642910c958db65fda0f3f8ce.gif)
删除的元素也是对的，索引也是对的，我就搞不明白效果为什么是这样，于是乎我开始面向搜索引擎编程，折腾了许久后：我觉得这是`bug`吗？不！应该是`uni-app#vue3`的`feature`我应该适应它，嗯！对！没错就是这样！
> 此处找不到表情包
## 删除元素我有必要通知父组件让父组件删吗？
---
![1628736362(1).jpg](https://img-blog.csdnimg.cn/img_convert/8ed7771735c78864d02f1b6e3fee3821.png)

**请求接口成功后我自己把自己干掉不就得了！**
```typescript
// 在子组件AccPswordCard.vue的template里面给组件增加个v-show
<template>
  <view v-if="showAPCard" class="acc-psword-card">
  ...
// setup里面新加一个变量
const showAPCard = ref(true);
// 删除请求成功之后
showAPCard.value = false;
```
这不就行了？
![媒体2.gif](https://img-blog.csdnimg.cn/img_convert/0b128aa6fca10d8e362ee48910b16794.gif)

## 局限性
### 也不是每一种场景这种都是可以的
 - 如果这个列表页是分页加载的，还要注意处理分页的`offset`和`size`的问题，因为我们并没有删除原有的列表中的某项数据，只是不展示
 - 如果列表页的上一个页面有展示列表数量必须在返回的时候更新数量
 
## 总结
当我们解决不了框架级别的`特性（bug）`的时候，不妨跳出以往的逻辑去思考如何解决一个问题，这次的这个问题也是在尝试`uni-app#vue3`发现的，让我对父子组件在列表中的删除的这个业务场景有了新的解决方案和思考，也是值得的鸭！

### 关于这类问题一般有两种场景

 - **引用第三方组件时**，比如引用` vue-awesome-swiper `这种的第三方组件时，因为源组件代码中包含有操作`window`对象，所以这一类的`window is not defined`按照官方的使用插件的方法引入就可以解决 
```javascript
// 现在plugins目录下新建文件vue-awesome-swiper.js
// 这里就以vue-awesome-swiper这个组件为例
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

export default () => {
	Vue.use(VueAwesomeSwiper)
}
// 然后在nuxt.config.js文件的css和plugins中添加以下代码
css: [
	...
    { src: 'swiper/dist/css/swiper.css' },
	...
],
plugins: [
	...	
  	{ src: '~/plugins/vue-awesome-swiper', ssr: false }，
  	...
],
// 这样的话就相当于全局引入了这个组件，在你的.vue文件中就可以直接使用
// <div class="swiper-wrapper"></div>这种样式来使用这个组件
```

 - **手写的在`window`对象上的操作**。这种的就按照官方的方法
```javascript
// 在你的.vue文件中加入
if (process.client) {
  require('external_library') // 这里就是操作window对象的代码
}
// 亲测完美解决???
 ```
 
