Hướng dẫn tạo ứng dụng chơi nhạc đơn giản trong ReactNative

Thư viện react-native-track-player là một thư viện hỗ trợ phát nhạc và video  trong ứng dụng viết bằng ReactNative.

 

Thư viện này cung cấp nhiều phương thức hỗ trợ xử lý điều khiển âm thanh như: play, pause, stop, remove, skip, next, previous, reset…

 

Để thực hành với thư viện này, bạn hãy thực hành những bước cơ bản nhất trước, sau đó mới nâng cấp dần ứng dụng.

Ứng dụng đầu tiên sẽ là phát một bản nhạc ở một link web với giao diện có một nút play và nút tạm dừng.

Trang tài liệu của thư viện https://rntp.dev/docs/basics/installation

Sau khi bạn tạo project mới, bạn hãy thực hiện  các bước dưới đây:

Bước 1: Cài đặt thư viện

npm install --save react-native-track-player

Bước 2: Tạo một file service chạy nhạc

Bạn tạo file là servicePlay.js có hàm playbackService. Hàm này tạm thời để trống, để dùng tên hàm đăng ký sãn với ứng dụng.

 

import TrackPlayer from 'react-native-track-player';
export async function playbackService() {
    // TODO: Attach remote event handlers
  }

Bước 3: Mở file index.js để đăng ký hàm playbackService

// Import thư viện
import TrackPlayer from 'react-native-track-player';
import { playbackService } from './servicePlay';

// đăng ký hàm viết ở dưới dòng này: AppRegistry.registerComponent(appName, () => App);

TrackPlayer.registerPlaybackService(() => playbackService);

Bước 4: Sang file App.tsx đăng tạo một hàm cài đặt

Trong component App, bạn tạo hàm setupApp để thiết lập ban đầu:

 const setupApp = async ()=>{
    console.log("setup player");
	// khởi tạo cho player
    await TrackPlayer.setupPlayer();
    
	// định nghĩa danh sách track
    let listTrack = [
      {
        id: '1',
        url: 'https://cdn.pixabay.com/audio/2022/10/18/audio_31c2730e64.mp3',
        title: 'Password Infinity',
        artist: '',
         
      }
    ];
	// đưa track vào player
    await TrackPlayer.add(listTrack);

    console.log("Finish setup");
  }

Tiếp theo trong component App, bạn gọi useEffect để kich hoạt setup khi render giao diện

  useEffect(   () => {
      console.log("start render");
    
      setupApp();
      
   }, []);

Vẫn trong component App, bạn viết thêm hàm Play và hàm Pause để nút bấm sử dụng

//--- hàm điều khiển
  const PlayMusic = ()=>{
  	// hàm chạy nhạc
       console.log("play music");

      TrackPlayer.play();
  }
  // hàm tạm dừng
  const PauseMusic = ()=>{
    console.log("pause music");
    
    TrackPlayer.pause();
  }

Tiếp theo phần return, bạn viết 2 nút bấm như sau:

  return (
    <View>
      <Text>Demo Music</Text>
      
      <View style={{width: 100,margin: 10}}>
        <Button title='Play' onPress={PlayMusic} />
      </View>
      
      <View style={{width: 100,margin: 10}}>
        <Button title='Pause' onPress={PauseMusic} />
      </View>
 
    </View>
  )

Bước 5: Khai báo thêm vào mainifest của android

Trong thẻ application bạn thêm thuộc tính usesCleartextTraffic

<application
      android:usesCleartextTraffic="true"

Bước 6: Chạy ứng dụng

Chú ý khi thử nghiệm nếu không báo lỗi mà không có âm thanh thì bạn phải kiểm tra tăng giảm âm thanh trên máy ảo, hoặc bạn có thể phải reset lại máy ảo.

 

Xem code đầy đủ tại https://zezo.dev/view/code-day-du-ung-dung-nghe-nhac-don-gian-trong-reactnative