1.安裝：yarn add react-native-sound

react-native link react-native-sound

?

2.

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { Slider } from 'react-native-elements'
import Sound from 'react-native-sound'

let mp3 = require('./sounds/guojing_xinqiang.mp3');//支持眾多格式
//如果是網絡音頻，使用 new Sound(mp3,null,error => {})
let whoosh = new Sound(mp3, (error) => {
if (error) {
return console.log('資源加載失敗', error);
}
});

export default class mySound extends Component {
constructor(props){
super(props);
this.state = {
volume: 0.5,
seconds: 0, //秒數
totalMin: '', //總分鐘
totalSec: '', //總分鐘秒數
nowMin: 0, //當前分鐘
nowSec: 0, //當前秒鐘
maximumValue: 0, //滑塊最大值
}
}
componentDidMount(){
let totalTime = whoosh.getDuration();
totalTime = Math.ceil(totalTime);
let totalMin = parseInt(totalTime/60); //總分鐘數
let totalSec = totalTime - totalMin * 60; //秒鐘數并判斷前綴是否 + '0'
totalSec = totalSec > 9 ? totalSec : '0' + totalSec;
this.setState({
totalMin,
totalSec,
maximumValue: totalTime,
})
}
componentWillUnmount(){
this.time && clearTimeout(this.time);
}
// 聲音+
_addVolume = () => {
let volume = this.state.volume;
volume += 0.1;
volume = parseFloat(volume).toFixed(1) * 1;
if(volume > 1){
return alert('目前已經是最大音量');
}
this.setState({volume: volume});
whoosh.setVolume(volume);
}
// 聲音-
_reduceVolume = () => {
let volume = this.state.volume;
volume -= 0.1;
volume = parseFloat(volume).toFixed(1) * 1;
if(volume < 0){
return alert('當前為靜音');
}
this.setState({volume: volume});
whoosh.setVolume(volume);
}
// 播放
_play = () => {
whoosh.play();
this.time = setInterval(() => {
whoosh.getCurrentTime(seconds => {
seconds = Math.ceil(seconds);
this._getNowTime(seconds)
})
},1000)
}
// 暫停
_pause = () => {
clearInterval(this.time);
whoosh.pause();
}
// 停止
_stop = () => {
clearInterval(this.time);
this.setState({
nowMin: 0,
nowSec: 0,
seconds: 0,
})
whoosh.stop();
}
_getNowTime = (seconds) => {
let nowMin = this.state.nowMin,
nowSec = this.state.nowSec;
if(seconds >= 60){
nowMin = parseInt(seconds/60); //當前分鐘數
nowSec = seconds - nowMin * 60;
nowSec = nowSec < 10 ? '0' + nowSec : nowSec;
}else{
nowSec = seconds < 10 ? '0' + seconds : seconds;
}
this.setState({
nowMin,
nowSec,
seconds
})
}
render() {
let time = this.state;
return (
<View style={styles.container}>
<Slider
// disabled //禁止滑動
maximumTrackTintColor={'#ccc'} //右側軌道的顏色
minimumTrackTintColor={'skyblue'} //左側軌道的顏色
maximumValue={this.state.maximumValue} //滑塊最大值
minimumValue={0} //滑塊最小值
value={this.state.seconds}
onSlidingComplete={(value)=>{ //用戶完成更改值時調用的回調（例如，當滑塊被釋放時）
value = parseInt(value);
this._getNowTime(value)
// 設置播放時間
whoosh.setCurrentTime(value);
}}
/>
<Text>{time.nowMin}:{time.nowSec}/{time.totalMin}:{time.totalSec}</Text>
<Text>當前音量: {this.state.volume}</Text>
<Text onPress={this._addVolume}>聲音+</Text>
<Text onPress={this._reduceVolume}>聲音-</Text>
<Text onPress={this._play}>播放</Text>
<Text onPress={this._pause}>暫停</Text>
<Text onPress={this._stop}>停止</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
});

//這里的UI庫可以自行更換

?

轉載于https://blog.csdn.net/qq_39910762/article/details/85249897

轉載于:https://www.cnblogs.com/boonook/p/10364889.html

總結

以上是生活随笔為你收集整理的react-native-sound的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。