React-Native使用react-native-track-player 实现播放器

一、安装

1. github地址

react-native-track-player
https://react-native-track-player.js.org/docs/api/events

ui组件使用的 React Native Elements
https://github.com/react-native-elements/react-native-elements

2. 官方文档

https://react-native-track-player.js.org/docs/api/events

3. 安装

yarn add react-native-track-player
cd ios && pod install

二、代码实现

1. 效果展示

主要分四块区域：

1. 音频的基本信息展示
2. 音频时间展示、倍速功能
3. 进度条展示
4. 控制功能（播放、暂停、上下曲、快进快退15s）

注意:上下曲情况特殊，不能参考，需要自己实现

2.页面功能实现

import TrackPlayer, { Event, State, useProgress, usePlaybackState, useTrackPlayerEvents } from 'react-native-track-player'
import { Text, Chip, Button, Dialog, Input, Slider, Icon } from '@rneui/themed'

renderPlayer = () => {
    return (
        <View>
            <TrackInfo />   	//音频的基本信息展示
            <TrackProgress />	//音频时间展示、倍速功能
            <TrackSlider />		//进度条展示
            <TrackControl />	//控制功能（播放、暂停、上下曲、快进快退15s）
        </View>
    )
}
    
const TrackInfo = function () {
    const [trackDescription, setTrackDescription,] = useState<string>();

    useTrackPlayerEvents([Event.PlaybackTrackChanged], async event => {
        if (event.type === Event.PlaybackTrackChanged && event.nextTrack != null) {
            const track = await TrackPlayer.getTrack(event.nextTrack);
            const { description } = track || {};
            setTrackDescription(description);
        }
    });
    return (
        <Text style={{ textAlign: 'left', fontSize: 18, marginTop: 20 }}>{trackDescription}</Text>
    )
}

const TrackProgress = function () {
    const { position, duration } = useProgress()
    const [speed, setSpeed] = useState(1)

    function format(seconds: any) {
        let mins = (Math.trunc(seconds / 60)).toString().padStart(2, '0')
        let secs = (Math.trunc(seconds % 60)).toString().padStart(2, '0')
        return `${mins}:${secs}`
    }

    function handleSpeed() {
        switch (speed) {
            case 0.5:
                setSpeed(1)
                TrackPlayer.setRate(1)
                return
            case 1:
                setSpeed(1.25)
                TrackPlayer.setRate(1.25)
                return
            case 1.25:
                setSpeed(1.5)
                TrackPlayer.setRate(1.5)
                return
            case 1.5:
                setSpeed(2)
                TrackPlayer.setRate(2)
                return
            case 2:
                setSpeed(0.5)
                TrackPlayer.setRate(0.5)
                return
            default:
                setSpeed(1)
                TrackPlayer.setRate(1)
                return
        }
    }

    function showSpeed() {
        switch (speed) {
            case 0.5:
                return '0.5x'
            case 1:
                return '1.0x'
            case 1.25:
                return '1.25x'
            case 1.5:
                return '1.5x'
            case 2:
                return '2.0x'
            default:
                return '1.0x'
        }
    }

    return (
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text>{format(position)}</Text>
            <TouchableOpacity onPress={() => { handleSpeed() }}>
                <Text>{`${showSpeed()}`}</Text>
            </TouchableOpacity>
            <Text>{format(duration)}</Text>
        </View>
    )
}

const TrackSlider = function () {
    const { position, duration } = useProgress(200)

    return (
        <Slider
            allowTouchTrack
            maximumValue={duration}
            minimumValue={0}
            step={1}
            value={position}
            onValueChange={(value) => { TrackPlayer.seekTo(value) }}
            thumbStyle={{ height: 15, width: 15 }}
            thumbTouchSize={{ height: 15, width: 15 }}
            thumbTintColor="black"
        />
    )
}

const TrackControl = function () {
    const playerState = usePlaybackState()
    const { position, duration } = useProgress()

    async function handlePress() {
        if (await TrackPlayer.getState() == State.Playing) {
            await TrackPlayer.pause()
        } else {
            if (Math.trunc(position) == Math.trunc(duration) && await TrackPlayer.getState() == State.Paused) {
                await TrackPlayer.seekTo(0)
            }
            await TrackPlayer.play()
        }
    }

    async function handleForward() {
        let new_position = position   15
        await TrackPlayer.seekTo(new_position)
    }

    async function handleBackward() {
        let new_position = position - 15
        await TrackPlayer.seekTo(new_position)
    }

    async function handleSkipToPrevious() {
        const track = await TrackPlayer.getCurrentTrack()
        if (track == 1) {
            TrackPlayer.skipToPrevious()
        }
    }

    async function handleSkipToNext() {
        const track = await TrackPlayer.getCurrentTrack()
        if (track == 0) {
            TrackPlayer.skipToNext()
        }
    }

    return (
        <View>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                <TouchableOpacity onPress={() => { handleBackward() }} >
                    <Icon name='rewind-15' type='material-community' />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => { handleSkipToPrevious() }} >
                    <Icon name='ios-play-skip-back' type='ionicon' />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => { handlePress() }} >
                    <Icon name={playerState === State.Playing ? 'pause' : 'play'} type='ionicon' />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => { handleSkipToNext() }} >
                    <Icon name='ios-play-skip-forward' type='ionicon' />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => { handleForward() }} >
                    <Icon name='fast-forward-15' type='material-community' />
                </TouchableOpacity>
            </View>
        </View>
    )
}

3.初始化播放器并且注册playbackService

const playbackService = async () => {
    TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play())
    TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause())
    TrackPlayer.addEventListener(Event.RemoteNext, async () => {
        const track = await TrackPlayer.getCurrentTrack()
        if (track == 0) {
            TrackPlayer.skipToNext()
        }
    })
    TrackPlayer.addEventListener(Event.RemotePrevious, async () => {
        const track = await TrackPlayer.getCurrentTrack()
        if (track == 1) {
            TrackPlayer.skipToPrevious()
        }
    })
    TrackPlayer.addEventListener(Event.RemoteJumpForward, async ({ interval }) => {
        const position = await TrackPlayer.getPosition()
        await TrackPlayer.seekTo(position   interval)
    })
    TrackPlayer.addEventListener(Event.RemoteJumpBackward, async ({ interval }) => {
        const position = await TrackPlayer.getPosition()
        await TrackPlayer.seekTo(position - interval)
    })

}

const setupPlayer = async () => {
    TrackPlayer.registerPlaybackService(() => playbackService)
    await TrackPlayer.setupPlayer()
    await TrackPlayer.updateOptions({
        android: {
            appKilledPlaybackBehavior: AppKilledPlaybackBehavior.ContinuePlayback
        },
        capabilities: [
            Capability.Play,
            Capability.Pause,
            Capability.SkipToNext,
            Capability.SkipToPrevious,
            Capability.JumpForward,
            Capability.JumpBackward,
        ],
        compactCapabilities: [
            Capability.Play,
            Capability.Pause,
            Capability.SkipToPrevious,
            Capability.SkipToNext,
        ],
    })
}

export default function App() {
    //初始化音频播放器
    setupPlayer()

	//在播放页面 加载音频url
    addUrl = async () => {
   		await TrackPlayer.add([url1, url12])
    }
}

这篇好文章是转载于：学新通技术网