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";
const Audio = (props) => {
const {voiceUrl, voiceTime} = props;
const [progressPrcent, setProgressPrcent] = useState(0)
const innerAudioContext = Taro.createInnerAudioContext({
useWebAudioImplement: true
});
useEffect(() => {
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);