博客

老规矩，还是先添加依赖：

npm install react-native-sound


react-native link react-native-sound

• 
  方法介绍
  

// 加载声音文件
let musciPath = require('../../src/sound/1.mp3');       // 匹配的格式挺多的....
var music = new Sound(musciPath,(error)=>{
    if(error){
          Alert.alert("播放失败。。。");
    }
})


music.play();                // 播放声音

music.setVolume(0.5);        // 将音量减半

music.setPan(1);             // 英语不过关(这是右声道的意思?)

music.setNumberOfLoops(-1);  // 无限循环播放，直到调用stop()

music.setCurrentTime(2.5);   // 设置从某一秒开始

music.getCurrentTime(seconds);// 获取当前播放点的秒数

music.pause();               // 暂停

music.stop(()=>{
    music.play();
});                          // 停止播放并重新开始，不想重新开始取掉music.play()就可以

music.release();             // 释放音频资源

• 
  Demo
  
  (只是测试一下，写的很简单，功能是正常的)

（PS：本地音乐和在线音乐只是在new Sound()中配置不一样,如下：）

// 本地音乐
let musciPath = require('../../src/sound/1.mp3');
var music = new Sound(musciPath,(error)=>{
    if(error){
        Alert.alert("播放失败。。。");
    }
});

// 网络资源
let musciPath = require('网上歌曲链接');
var music = new Sound(musciPath,null,(error)=>{
    if(error){
        Alert.alert("播放失败。。。");
    }
});

我测试的全部代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text,TouchableOpacity, View} from 'react-native';
import Sound from 'react-native-sound';


// 本地音乐
let musciPath = require('../../src/sound/1.mp3');
var music = new Sound(musciPath,(error)=>{
    if(error){
        Alert.alert("播放失败。。。");
    }
});

// 网络资源
let musciPath = require('网上歌曲链接');
var music = new Sound(musciPath,null,(error)=>{
    if(error){
        Alert.alert("播放失败。。。");
    }
});


export default class Me extends Component{

    render(){
        return(
            <View style={styles.container}>
                <TouchableOpacity style={{marginTop:15}} onPress={()=>{music.play()}}>
                    <Text style={{color:'#4398ff',fontSize:20}}>
                        播放本地音乐
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity style={{marginTop:15}} onPress={()=>{music.pause()}}>
                    <Text style={{color:'#4398ff',fontSize:20}}>
                        暂停
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity style={{marginTop:15}} onPress={()=>{music.stop(()=>{music.play()})}}>
                    <Text style={{color:'#4398ff',fontSize:20}}>
                        重新开始
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity style={{marginTop:15}} onPress={()=>{music.stop(()=>{music.release()})}}>
                    <Text style={{color:'#4398ff',fontSize:20}}>
                        停止
                    </Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        alignItems:'center'
    }
})

测试是正常的！