用Taro（React+TS）实现音频播放组件,消除小程序音频播放的烦恼

2023-12-09 19:36:21

微信小程序官方的audio已经停止维护了，在很多iOS真机上也确实存在着无法播放、无法显示总时长等问题。Taro框架是一个跨端开发框架，支持使用React + Typescript开发微信小程序。基于此，我们可以利用Taro来封装一个基本的音频播放组件，让您在开发小程序时更轻松地实现音频播放功能。

准备工作

在开始之前，我们需要先确保已经安装了Taro脚手架。如果没有，可以使用以下命令进行安装：

npm install -g @tarojs/cli

然后，创建一个新的Taro项目：

taro init my-taro-project

cd进入项目目录，安装所需依赖：

cd my-taro-project
npm install taro-audio-player

封装音频播放组件

接下来，让我们来封装音频播放组件。在src目录下新建一个名为AudioPlayer.tsx的文件，并添加以下代码：

import Taro, { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import TaroAudioPlayer from 'taro-audio-player';

export default class AudioPlayer extends Component {
  render() {
    const { src, poster } = this.props;

    return (
      <View className='audio-player'>
        <TaroAudioPlayer src={src} poster={poster} />
      </View>
    );
  }
}

在这个组件中，我们使用了TaroAudioPlayer组件，它是一个跨端音频播放组件，可以在微信小程序、支付宝小程序、百度小程序等平台上使用。

使用音频播放组件

现在，我们就可以在页面中使用这个音频播放组件了。在src目录下新建一个名为index.tsx的文件，并添加以下代码：

import Taro, { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import AudioPlayer from './AudioPlayer';

export default class Index extends Component {
  render() {
    return (
      <View className='index'>
        <AudioPlayer src='https://xxx.mp3' poster='https://xxx.jpg' />
      </View>
    );
  }
}