如何解决使用 react-native-track-player 从 flatlist 播放选定的歌曲
我不知道如何从 flatlist 播放选定的曲目/歌曲,我已经有了一个 playerscreen.js,我可以在其中播放歌曲数组中的歌曲。我想实现用户搜索歌曲并从 flatlist 中选择的列表播放歌曲。下面是我的songlist.js
const Songlist = () => {
const [loading,setLoading] = useState(false);
const navigation = useNavigation();
renderFooter = () => {
if (!loading) return null
return (
<View
style={{
paddingVertical: 20,borderTopWidth: 1,borderColor: '#CED0CE',}}
>
<ActivityIndicator animating size='large' />
</View>
)
}
renderSeparator = () => {
return (
<View
style={{
height: 1,width: '86%',backgroundColor: '#CED0CE',marginLeft: '5%',}}
/>
)
}
return (
<View>
<FlatList
data={songs}
keyExtractor={item => item.id}
renderItem={({ item,index }) => (
<TouchableOpacity
onPress={() => navigation.navigate('Player')}
>
<View
style={{
flexDirection: 'row',padding: 16,alignItems: 'center',}}
>
<Avatar
source={{ uri: item.artwork.thumbnail }}
size='giant'
style={{ marginRight: 16 }}
/>
<Text
category='s1'
style={{color: '#000'}}
>{`${item.title}`}</Text>
</View>
<Text
category='s2'
style={{color: '#999',marginHorizontal: 80,bottom: 20}}
>Genre: {`${item.genre}`}</Text>
</TouchableOpacity>
)}
ItemSeparatorComponent={renderSeparator}
ListFooterComponent={renderFooter}
/>
</View>
);
}
export default Songlist;
这是我最初的 playerscreen.js
export default function PlayerScreen() {
const navigation = useNavigation();
const scrollX = useRef(new Animated.Value(0)).current;
const slider = useRef(null);
const isPlayerReady = useRef(false);
const index = useRef(0);
const [songIndex,setSongIndex] = useState(0);
const isItFromUser = useRef(true);
// for tranlating the album art
const position = useRef(Animated.divide(scrollX,width)).current;
const playbackState = usePlaybackState();
useEffect(() => {
// position.addListener(({ value }) => {
// console.log(value);
// });
scrollX.addListener(({value}) => {
const val = Math.round(value / width);
setSongIndex(val);
});
TrackPlayer.setupPlayer().then(async () => {
// The player is ready to be used
console.log('Player ready');
// add the array of songs in the playlist
await TrackPlayer.reset();
await TrackPlayer.add(songs);
TrackPlayer.play();
isPlayerReady.current = true;
await TrackPlayer.updateOptions({
stopWithApp: false,alwaysPauSEOnInterruption: true,capabilities: [
Capability.Play,Capability.Pause,Capability.SkipToNext,Capability.SkipToPrevIoUs,],});
//add listener on track change
TrackPlayer.addEventListener(Event.PlaybackTrackChanged,async (e) => {
console.log('song ended',e);
const trackId = (await TrackPlayer.getCurrentTrack()) - 1; //get the current id
console.log('track id',trackId,'index',index.current);
if (trackId !== index.current) {
setSongIndex(trackId);
isItFromUser.current = false;
if (trackId > index.current) {
goNext();
} else {
goPrv();
}
setTimeout(() => {
isItFromUser.current = true;
},200);
}
// isPlayerReady.current = true;
});
//monitor intterupt when other apps start playing music
TrackPlayer.addEventListener(Event.RemoteDuck,(e) => {
// console.log(e);
if (e.paused) {
// if pause true we need to pause the music
TrackPlayer.pause();
} else {
TrackPlayer.play();
}
});
});
return () => {
scrollX.removeAllListeners();
TrackPlayer.destroy();
// exitPlayer();
};
},[]);
// change the song when index changes
useEffect(() => {
if (isPlayerReady.current && isItFromUser.current) {
TrackPlayer.skip(songs[songIndex].id)
.then((_) => {
console.log('changed track');
})
.catch((e) => console.log('error in changing track ',e));
}
index.current = songIndex;
},[songIndex]);
const exitPlayer = async () => {
try {
await TrackPlayer.stop();
} catch (error) {
console.error('exitPlayer',error);
}
};
const goNext = async () => {
slider.current.scrollToOffset({
offset: (index.current + 1) * width,});
await TrackPlayer.play();
};
const goPrv = async () => {
slider.current.scrollToOffset({
offset: (index.current - 1) * width,});
await TrackPlayer.play();
};
const renderItem = ({index,item}) => {
return (
<Animated.View
style={{
alignItems: 'center',width: width,transform: [
{
translateX: Animated.multiply(
Animated.add(position,-index),-100,),},}}>
<Animated.Image
source={item.artwork}
style={{width: 320,height: 320,borderRadius: 5}}
/>
</Animated.View>
);
};
return (
<SafeAreaView style={styles.container}>
<SafeAreaView style={{height: 320}}>
<Animated.FlatList
ref={slider}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
scrollEventThrottle={16}
data={songs}
renderItem={renderItem}
keyExtractor={(item) => item.id}
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {x: scrollX}}}],{useNativeDriver: true},)}
/>
</SafeAreaView>
<TouchableOpacity
style={styles.genreContainer}
onPress={() => navigation.navigate('Genre')}
>
<SimpleLineIcons name="playlist" size={20} color='#fff' />
<Text style={styles.genre}> Genre</Text>
</TouchableOpacity>
<View>
<Text style={styles.title}>{songs[songIndex].title}</Text>
<Text style={styles.artist}>{songs[songIndex].artist}</Text>
</View>
<SliderComp />
<Controller onNext={goNext} onPrv={goPrv} />
</SafeAreaView>
);
}
解决方法
import React from 'react';
import { SafeAreaView,View,FlatList,StyleSheet,Text,StatusBar,ScrollView,TouchableOpacity } from 'react-native';
import Sound from 'react-native-sound';
const MusicApp = () => {
const DATA = [
{
title: 'Advertising Local',isRequire: true,url: require('./resource/advertising.mp3'),},{
title: 'Advertising URL',url:
'https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/advertising.mp3',{
title: 'Hosana',url: require('./Hosana.mp3'),{
title: 'Play aac sound from remote URL',url:
'https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/pew2.aac',{
title: 'Frog wav sound from Local',url: require('./resource/frog.wav'),{
title: 'Frog wav sound from remote URL',url:
'https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/frog.wav',];
let sound;
const playSound =(item,id)=>{
console.log("the url is "+ item.url);
if(item.url !=1){
sound = new Sound(item.url,'',(error,_sound) => {
if (error) {
alert('error' + error.message);
return;
}
stopSound
sound.play(() => {
sound.release();
});
});
}else{
sound = new Sound(item.url,_sound) => {
if (error) {
alert('error' + error.message);
return;
}
stopSound
sound.play(() => {
sound.release();
});
});
}
}
const stopSound =(index)=>{
sound.stop(() => {
console.log('Stop');
});
}
const renderItem = ({ item,index }) => (
<ScrollView style={{flex: 1}}>
<View style={styles.item}>
<Text style={styles.title}> {item.title} </Text>
<TouchableOpacity onPress={()=>playSound(item,index)} style={{padding: 10,backgroundColor: 'blue'}}><Text>Play</Text></TouchableOpacity>
<TouchableOpacity onPress={()=>stopSound(index)} style={{padding: 10,backgroundColor: 'red'}}><Text>Stop</Text></TouchableOpacity>
</View>
</ScrollView>
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,marginTop: StatusBar.currentHeight || 0,item: {
backgroundColor: '#f9c2ff',padding: 20,marginVertical: 8,marginHorizontal: 16,title: {
fontSize: 20,});
export default MusicApp;
注意: yarn 添加 react-native-sound 还是 npm install react-native-sound。 其次,音乐的来源有两个-远程url和本地文件路径,请确保在运行前适当修改本地文件路径
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。