Así que creé una aplicación web simple usando Howler con reacciones para transmitir canciones que subimos previamente al sitio web. Usé Firebase para almacenar los archivos de audio y Howler para reproducirlos.
{isPlaying === false ? ( <button onClick = {handlePlay}> Play </button> ) : ( <button onClick = {handlePause} Pause </button> )}Este es mi código para el botón de alternar y las funciones del controlador de eventos se muestran a continuación.
const [isPlaying, setIsPlaying] = useState(false); const src = song.audio; const sound = new Howl ({ src, html5: true }) const handlePause = () => { sound.stop(); setIsPlaying(false); } const handlePlay = () => { sound.play(); setIsPlaying(true); }Aquí, el botón de alternancia y la función de reproducción funcionan bien, pero no puedo pausar la canción (la canción se reproduce cuando se hace clic en el botón "reproducir" y el botón cambia a "pausa", pero la canción no se detiene cuando se vuelve a hacer clic en el botón)
Solo he creado páginas web HTML CSS simples antes, esta es mi primera aplicación web que usa un marco/biblioteca. Remití la documentación de Howler en github, pero no pude resolver esto. Si alguien me puede ayudar, estaría más que agradecido. ¡Gracias por adelantado!
Me encontré con un problema similar al usar React with Howler y parece ser un problema con la biblioteca en sí.
La única solución que pude encontrar para evitar esto fue usar la biblioteca react-howler . Puedes verlo aquí: reaccionar-aullador
Solo necesita pasar un valor booleano a la propiedad de reproducción de ReactHowler para hacer una pausa.
Así que tu código se vería así:
import React from "react"; import { useState } from "react"; import ReactHowler from "react-howler"; export const Sound = () => { const [playing, setPlaying] = useState(false); const src = song.audio; const playSound = () => { setPlaying(true); }; const pauseSound = () => { setPlaying(false); }; return ( <div> <ReactHowler playing={playing} src={[src]} /> <button onClick={playSound}>Play</button> <button onClick={pauseSound}>Pause</button> <p>{playing ? "Playing" : "Not playing"}</p> </div> ); };