diff --git a/zh-cn/react-native-audio-toolkit.md b/zh-cn/react-native-audio-toolkit.md index dc1b6b2fbe3659d1e3261d619340ae043e983218..69fc839f1ecdc757cd42a7fd9193a9f1dc26c9e0 100644 --- a/zh-cn/react-native-audio-toolkit.md +++ b/zh-cn/react-native-audio-toolkit.md @@ -3,7 +3,7 @@ > 模板版本：v0.2.2

-

@react-native-community/audio-toolkit

+

@react-native-oh-tpl/audio-toolkit

@@ -19,7 +19,7 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/audio-toolkit](https://github.com/react-native-oh-library/react-native-audio-toolkit/releases/tag/2.0.3-0.0.1) [Releases](https://github.com/react-native-oh-library/lottie-react-native/releases)，并下载适用版本的 tgz 包。 +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/audio-toolkit](https://github.com/react-native-oh-library/react-native-audio-toolkit/releases/tag/2.0.3-0.0.4) [Releases](https://github.com/react-native-oh-library/react-native-audio-toolkit/releases)，并下载适用版本的 tgz 包。 进入到工程目录并输入以下命令： @@ -45,14 +45,20 @@ yarn add @react-native-oh-tpl/audio-toolkit@file:# > [!WARNING] 使用时 import 的库名不变。 -```js +> [!TIP] # demo使用了三方库[@react-native-oh-tpl/react-native-slider](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-slider.md) + +> [!TIP] # demo使用了权限三方库[@react-native-oh-tpl/react-native-permissions](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-permissions.md) + +```tsx import React, { Component } from 'react'; -import { Button, PermissionsAndroid, Platform, SafeAreaView, StyleSheet, Switch, Text, View } from 'react-native'; -import Slider from '@react-native-community/slider'; +import { Button, PermissionsAndroid, Platform, StyleSheet, Switch, Text, View, ScrollView } from 'react-native'; +import Slider from '@react-native-oh-tpl/react-native-slider'; import { Player, Recorder, MediaStates } from '@react-native-community/audio-toolkit'; +import RTNPermissions, {RESULTS} from "@react-native-oh-tpl/react-native-permissions"; const filename = 'test.mp4'; + type Props = {}; type State = { @@ -60,9 +66,11 @@ type State = { recordButton: string, stopButtonDisabled: boolean, - playButtonDisabled: boolean, + playButtonDisabled: boolean | undefined, recordButtonDisabled: boolean, + recordPauseButtonDisabled: boolean, + loopButtonStatus: boolean, progress: number, @@ -70,10 +78,10 @@ type State = { }; export default class App extends Component { - player: Player | null; - recorder: Recorder | null; - lastSeek: number; - _progressInterval: IntervalID; + player: Player | null = null; + recorder: Recorder | null = null; + lastSeek: number = 0; + _progressInterval: NodeJS.Timeout | null = null; constructor(props: Props) { super(props); @@ -85,6 +93,7 @@ export default class App extends Component { stopButtonDisabled: true, playButtonDisabled: true, recordButtonDisabled: true, + recordPauseButtonDisabled:true, loopButtonStatus: false, progress: 0, @@ -97,7 +106,6 @@ export default class App extends Component { this.player = null; this.recorder = null; this.lastSeek = 0; - this._reloadPlayer(); this._reloadRecorder(); @@ -113,7 +121,9 @@ export default class App extends Component { } componentWillUnmount() { - clearInterval(this._progressInterval); + if (this._progressInterval) { + clearInterval(this._progressInterval); + } } _shouldUpdateProgressBar() { @@ -121,19 +131,22 @@ export default class App extends Component { return Date.now() - this.lastSeek > 200; } - _updateState(err) { + _updateState() { + this.setState({ playPauseButton: this.player && this.player.isPlaying ? 'Pause' : 'Play', recordButton: this.recorder && this.recorder.isRecording ? 'Stop' : 'Record', + recordPauseButtonDisabled: !this.recorder || !this.recorder.isRecording, + stopButtonDisabled: !this.player || !this.player.canStop, - playButtonDisabled: !this.player || !this.player.canPlay || this.recorder.isRecording, - recordButtonDisabled: !this.recorder || (this.player && !this.player.isStopped), + playButtonDisabled: !this.player || !this.player.canPlay || this.recorder?.isRecording, + recordButtonDisabled: (!this.recorder || (this.player && !this.player.isStopped)) ?? true, }); } _playPause() { - this.player.playPause((err, paused) => { + this.player?.playPause((err, paused) => { if (err) { this.setState({ error: err.message @@ -144,38 +157,43 @@ export default class App extends Component { } _stop() { - this.player.stop(() => { + this.player?.stop(() => { this._updateState(); }); } - _seek(percentage) { + _seek(percentage: number) { if (!this.player) { return; } this.lastSeek = Date.now(); - let position = percentage * this.player.duration; - this.player.seek(position, () => { - this._updateState(); - }); + this.player.seek(position, () => { }); + } + + _getPlayPath() { + if (this.recorder) { + return this.recorder.fsPath; + } + return filename; } _reloadPlayer() { if (this.player) { this.player.destroy(); } - - this.player = new Player(filename, { + this.player = new Player(this._getPlayPath(), { autoDestroy: false }).prepare((err) => { if (err) { console.log('error at _reloadPlayer():'); console.log(err); } else { - this.player.looping = this.state.loopButtonStatus; + if (this.player) { + this.player.looping = this.state.loopButtonStatus; + } } this._updateState(); @@ -207,6 +225,12 @@ export default class App extends Component { } _toggleRecord() { + if(this.recorder && this.recorder.state === MediaStates.PAUSED){ + this.recorder?.record((err) => { + this._updateState(); + }) + return + } if (this.player) { this.player.destroy(); } @@ -214,6 +238,8 @@ export default class App extends Component { let recordAudioRequest; if (Platform.OS == 'android') { recordAudioRequest = this._requestRecordAudioPermission(); + } else if (Platform.OS === 'harmony') { + recordAudioRequest = this._requestRecordAudioPermissionHs(); } else { recordAudioRequest = new Promise(function (resolve, reject) { resolve(true); }); } @@ -225,8 +251,8 @@ export default class App extends Component { }); return; } - - this.recorder.toggleRecord((err, stopped) => { + + this.recorder?.toggleRecord((err, stopped) => { if (err) { this.setState({ error: err.message @@ -236,12 +262,27 @@ export default class App extends Component { this._reloadPlayer(); this._reloadRecorder(); } - this._updateState(); }); }); } + + async _requestRecordAudioPermissionHs() { + try { + let check = await RTNPermissions.request('ohos.permission.MICROPHONE'); + console.info("RTNPermissions===== request", check); + if (check === RESULTS.GRANTED) { + return true; + } else { + return false; + } + } catch (err) { + console.error(err); + return false; + } + } + async _requestRecordAudioPermission() { try { const granted = await PermissionsAndroid.request( @@ -265,7 +306,7 @@ export default class App extends Component { } } - _toggleLooping(value) { + _toggleLooping(value: boolean) { this.setState({ loopButtonStatus: value }); @@ -276,7 +317,7 @@ export default class App extends Component { render() { return ( - + Playback @@ -303,10 +344,18 @@ export default class App extends Component {