1
resposta

play de audio com react, com arquivo que vem da api

Olá pessoal criei uma API em nodejs, e estou consumindo ela com reactjs usando usando axios, quando tento criar um objeto do tipo áudio com o arquivo , não consigo dar play, alguma ajuda?

método da api que devolve o arquivo

static async pegaUmaMusica(req, res){
        const {id} = req.params
        try {
            const umaMusica = await database.Musicas.findOne({where: {id: Number(id) }})
            const filePath = umaMusica.arquivo 
            const stat = await getStat(filePath)

            res.writeHead(200, {
                'Content-Type': 'audio/mpeg',
                'Content-Length': stat.size
            })

            const stream = fs.createReadStream(filePath)

            //só exibe quando terminar de enviar tudo
            stream.on('end', () => console.log('download completo!'))

            stream.pipe(res);
            //return res.status(200).json(stat)

        } catch (error) {

            return res.status(500).json(error.message)
        }
    }

front-end

método axio que busca a musica na API

export const buscaMusica = async(url, mensagenErro,audio)=> {
    let response = undefined;
    try {
        response = await api.get(url);
        if(response.data){
           console.log(response.data );
           audio(response.data);
        }


    } catch (error) {
        if (error.response) {
            mensagenErro (error.response.data.error);
        } else {
            mensagenErro("erro ao carregar o audio!")
        }

    }
}

manipulando aqruivo para criar play de audio

import React, {useState, useEffect, useRef} from 'react';
import {buscaMusica} from '../api/api';

function Musicas() {
  const [arquivoAudio, setArquivoAudio] = useState(null);
  const [erro, setErro] = useState("");
  var novoAudio = new Audio(arquivoAudio);
  const $videoPlayer = useRef(novoAudio);
  return(

  <>

  <button

     onClick = {
        ()=>{
           buscaMusica('/musica/129', setErro, setArquivoAudio)
        }
     }
  >
     Buscar musica      
  </button>

  <button
    onClick = {
        ()=>{
           $videoPlayer.current.play();
           console.log(arquivoAudio);
           console.log(novoAudio);

        }
     }
  >
    Play
  </button>

  </>

  );

}

alguém me ajuda como usar esse arquivo para criar um play de áudio. OBS. não salvo o arquivo no banco, somente o caminho da pasta . outra coisa se eu buscar com o postman ele cria uma play de áudio para min e funciona normal, oque quer dizer que da parte da api deve esta tudo certo, ou não? Desde já agradeço

1 resposta

Olá, Breno! Tudo bem?

Poderia explicar se já tentou alguma outra forma? Por exemplo, colocando o componente de áudio diretamente na árvore de componentes, ou testando com alguma URL da web?

Também recomendo dar uma olhada nessa biblioteca: react-audio-player.

Não sei até que ponto vamos poder te ajudar, porque é um assunto bem específico, mas vamos tentar!