Экспо-АВ: Как загрузить аудиопоток?

Вопрос или проблема

import { Audio } from "expo-av";

const streamUrl = "https://adminradiosulamita.store:8000/radio.mp3";

import { Sound } from "expo-av/build/Audio";

export default function HomeScreen() {
  const [sound, setSound] = useState<Sound>();
  const [loading, setLoading] = useState(false);

  async function playSound() {
    setLoading(true);

    // const { sound } = await Audio.Sound.createAsync(
    //   {
    //     uri: streamUrl,
    //     headers: {
    //       Range: "bytes=0-",
    //       // передайте дополнительные заголовки, чтобы он знал, что это аудиопоток
    //       "Content-Type": "audio/mpeg",
    //       "Icy-MetaData": "1",
    //     },
    //   },
    //   {
    //     shouldPlay: true,
    //   }
    // );

    const sound = new Audio.Sound();

    await sound.loadAsync(
      {
        uri: streamUrl,
      },
      {
        shouldPlay: true,
      }
    );

    setSound(sound);

    await sound.playAsync();
    setLoading(false);
  }

  useEffect(() => {
    return sound
      ? () => {
          sound.unloadAsync();
        }
      : undefined;
  }, [sound]);

  return (
    <ParallaxScrollView>
      <ThemedView style={styles.titleContainer}>
        <TouchableOpacity onPress={playSound}>
          <ThemedText type="title">Играть</ThemedText>
        </TouchableOpacity>
        <ThemedText type="title">
          {loading ? "Загрузка" : "Не загружается"}
        </ThemedText>
      </ThemedView>
    </ParallaxScrollView>
  );
}

Ответ или решение

Чтобы решить проблему медленной загрузки аудиопотока с использованием Expo AV, необходимо учесть несколько аспектов. Ниже приведено решение, которое должно помочь сократить время загрузки и улучшить пользовательский опыт.

Оптимизация загрузки аудиопотока

1. Использование Audio.Sound.createAsync:
   Чтобы загрузить аудиопоток, можно использовать метод Audio.Sound.createAsync, который предназначен для работы с аудиопотоками. Этот метод будет загружать и воспроизводить звук более эффективно.

2. Добавление заголовков для потока:
   Убедитесь, что ваше аудиопотоковое соединение правильно настроено с заголовками, которые указывают, что это аудиопоток.

Исправленный код

Вот исправленная версия вашего кода, которая должна решить проблему медленной загрузки:

import React, { useState, useEffect } from "react";
import { Audio } from "expo-av";
import { TouchableOpacity, Text, View } from "react-native";

const streamUrl = "https://adminradiosulamita.store:8000/radio.mp3";

export default function HomeScreen() {
  const [sound, setSound] = useState();
  const [loading, setLoading] = useState(false);

  async function playSound() {
    setLoading(true);

    try {
      const { sound } = await Audio.Sound.createAsync(
        {
          uri: streamUrl,
          headers: {
            "Content-Type": "audio/mpeg",
            "Icy-MetaData": "1",
          },
        },
        {
          shouldPlay: true,
        }
      );

      setSound(sound);
      await sound.playAsync();
    } catch (error) {
      console.error("Ошибка воспроизведения звука:", error);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    return sound
      ? () => {
          sound.unloadAsync();
        }
      : undefined;
  }, [sound]);

  return (
    <View>
      <TouchableOpacity onPress={playSound}>
        <Text>Play</Text>
      </TouchableOpacity>
      <Text>{loading ? "Загрузка..." : "Не загружается"}</Text>
    </View>
  );
}

Объяснение исправлений

1. Использование Audio.Sound.createAsync: Вместо ручной загрузки звука с использованием new Audio.Sound(), мы используем Audio.Sound.createAsync, что позволяет упростить код и улучшить скорость загрузки.

2. Обработка ошибок: Включена обработка ошибок в блоке try-catch, что поможет выявить потенциальные проблемы при загрузке или воспроизведении звука.

3. Герметизация состояния загрузки: Установка состояния загрузки в начале и конце функции playSound позволяет пользователям видеть актуальное состояние.

4. Проверка загружаемого URL: Убедитесь, что предоставленный URL к аудиопотоку корректен и активно работает. Это влияет на скорость загрузки.

Эти изменения должны заметно улучшить производительность при работе с аудиопотоком в вашем приложении на базе Expo. Не забудьте протестировать его на различных устройствах, чтобы убедиться, что скорость загрузки удовлетворительная.