Как преобразовать mp3 base64, поступающий из бэкэнда, в воспроизводимый звук в браузере в Javascript/React?

Я пытаюсь получить файл .mp3 из бэкэнда и отображаю воспроизводимый звук. Итак, бэкенд конвертирует файл .mp3 в base64 и отправляет мне. Пытался отправить .mp3 напрямую, но это не работает.

Я получаю mp3, преобразованный в base64 из бэкэнда, как это

axios
        .post(`abcEndPoint`, {
          text: textValue
        })
        .then((res) => {
         
          setAudio(res.data)
          console.info(res.data)
        });

Res.data выглядит следующим образом

Теперь я конвертирую этот ответ base64 в читаемый URL-адрес аудиотега с помощью функции.

function base64ToImageUrl(base64String) {
  return `data:audio/mpeg;base64,${base64String}`;
}

Я пытался изменить формат на аудио/wav, .mp3, аудио/mp3

И, наконец, вот мой jsx для аудио

<>
                  <audio controls>
                    <source src = {base64ToImageUrl(audio)} />
                    Your browser does not support the audio element.
                  </audio>
                </>

Что я делаю неправильно, или это вообще выполнимо в реакции/JavaScript

Это не Base64. Вы имели в виду, что хотите преобразовать его в Base64?

Dave Newton 14.02.2023 07:32

@DaveNewton, согласно бэкенду, я получаю base64. Он не конвертируется должным образом?

Muhammad Talha 14.02.2023 07:38

Я имею в виду ... это не Base64, очевидно - это волновой файл (технически это рифф-файл, но :shrug:) Видите заголовок и данные, отличные от base-64?

Dave Newton 14.02.2023 07:40

(Касательно, но вы можете или не хотите публиковать настоящую конечную точку, поскольку она доступна.)

Dave Newton 14.02.2023 07:42

У вас есть решение, как я могу отображать mp3 (не base64) в html с помощью js

Muhammad Talha 14.02.2023 07:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

тестируя вашу живую конечную точку, я вижу, что вы возвращаете двоичные данные (аудиоформат RIFF), поэтому вы не используете base64 (возможно, только внутри..., idk).

исходя из этого, возможно, вы пытаетесь воспроизвести звук, загруженный из вашего API. проверьте решение этого ответа, но вместо создания тега <a> это будет тег <source> (внутри <audio>).

пример:

axios
  .post('http://localhost:8080/tts',
    { text: textValue }, // data
    { responseType: 'blob' }, // config options
  )
  .then((response) => {
    // create file link in browser's memory
    const audioObjectUrl = URL.createObjectURL(response.data);
    setAudio(audioObjectUrl);
  });

когда вы закончите его использовать, не забудьте отозвать его с помощью URL.revokeObjectURL(audio);:

React.useEffect(() => {
  // note that the return function of useEffect is the cleanup function
  return () => URL.revokeObjectURL(audio);
}, [])

наконец, удалите звонки на base64ToImageUrl:

<>
  <audio controls>
    <source src = {audio} />
    Your browser does not support the audio element.
  </audio>
</>

Большое спасибо, это работает. Я мог что-то упустить раньше

Muhammad Talha 14.02.2023 08:49

@MuhammadTalha Вы можете проголосовать и/или принять ответ, если он решил ваши проблемы.

Dave Newton 14.02.2023 15:17

@MuhammadTalha, пожалуйста, примите ответ, если он решил вашу проблему. это помогает построить лучшее сообщество :)

arthur simas 14.02.2023 19:42

@arthursimas принял, но не могли бы вы изменить живую конечную точку на фиктивный текст. Спасибо

Muhammad Talha 15.02.2023 08:34

Другие вопросы по теме