微信小程序createInnerAudioConte,有时录音无法播放的问题

95 阅读1分钟
import React, {useEffect, useState} from 'react';
import {Image, Text, View} from "@tarojs/components";
import Taro from "@tarojs/taro";
import IconPause from "@/assets/images/icon-pause.svg";
import {AtProgress} from "taro-ui";
import ss from "./index.module.less";
/*
* props:{
*   voiceUrl: string,
*   voiceTime: string
* }
* */
const Audio = (props) => {
  const {voiceUrl, voiceTime} = props;
  const [progressPrcent, setProgressPrcent] = useState(0)
  const innerAudioContext = Taro.createInnerAudioContext({
    useWebAudioImplement: true
  });
  useEffect(() => {
      // 不能写在这里
    // innerAudioContext.onPlay(() => {
    //   console.log('onPlay')
    // });
    // innerAudioContext.onTimeUpdate(() => {
    //   console.log('onTimeUpdate', innerAudioContext.currentTime, innerAudioContext.duration)
    //   console.log('onTimeUpdate', innerAudioContext)
    //   setProgressPrcent(innerAudioContext.currentTime / innerAudioContext.duration * 100)
    // });
    // innerAudioContext.onEnded(() => {
    //   console.log('onEnded')
    //   setProgressPrcent(0)
    // });
    // innerAudioContext.onCanplay(() => {
    //   console.log('可以播放')
    // })
    // innerAudioContext.onError((err) => {
    //   console.log('播放失败:', err)
    // })

    return () => {
      innerAudioContext.destroy()
    }
  }, []);
  return (<View className={ss['voice']} style={{...props.style}}>
    <div className={ss['icon']} onClick={() => {
      const index = voiceUrl.indexOf('?');
      const symbol = index === -1 ? '?' : '&';
      const timeUrl = `${voiceUrl}${symbol}time=${new Date().getTime()}`;
      console.log('voiceUrl', timeUrl)
      innerAudioContext.autoplay = false
      innerAudioContext.src = timeUrl
      innerAudioContext.play();
      innerAudioContext.onPlay(() => {
        console.log('onPlay--')
      });
      innerAudioContext.onCanplay(() => {
        innerAudioContext.play();
        console.log('开始播放')
      })
      innerAudioContext.onWaiting(() => {
        innerAudioContext.pause()
      });
      innerAudioContext.onTimeUpdate(() => {
        console.log("==当前时间==" + Math.floor(innerAudioContext.currentTime) + "==音频时间==" + Math.floor(innerAudioContext.duration));
        setProgressPrcent(innerAudioContext.currentTime / innerAudioContext.duration * 100)
        if (Math.floor(innerAudioContext.currentTime) == Math.floor(innerAudioContext.duration)) {
          setProgressPrcent(100);
          console.log("===时间stop===")
        }
      });
      innerAudioContext.onEnded(() => {
        console.log('onEnded')
        setTimeout(()=>{
          setProgressPrcent(0)
        },300);
      });
    }}>播放录音</div>
    <AtProgress percent={progressPrcent} color='#fff' isHidePercent/>
    <Text className={ss['voiceTime']}>{voiceTime}</Text>
  </View>);
};

export default React.memo(Audio);