Я пытаюсь получить файл .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
@DaveNewton, согласно бэкенду, я получаю base64. Он не конвертируется должным образом?
Я имею в виду ... это не Base64, очевидно - это волновой файл (технически это рифф-файл, но :shrug:) Видите заголовок и данные, отличные от base-64?
(Касательно, но вы можете или не хотите публиковать настоящую конечную точку, поскольку она доступна.)
У вас есть решение, как я могу отображать mp3 (не base64) в html с помощью js
тестируя вашу живую конечную точку, я вижу, что вы возвращаете двоичные данные (аудиоформат 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>
</>
Большое спасибо, это работает. Я мог что-то упустить раньше
@MuhammadTalha Вы можете проголосовать и/или принять ответ, если он решил ваши проблемы.
@MuhammadTalha, пожалуйста, примите ответ, если он решил вашу проблему. это помогает построить лучшее сообщество :)
@arthursimas принял, но не могли бы вы изменить живую конечную точку на фиктивный текст. Спасибо
Это не Base64. Вы имели в виду, что хотите преобразовать его в Base64?