Исправить тег Audio в html, не работающий в React - PullRequest
Новая
       19

Исправить тег Audio в html, не работающий в React

0 голосов
/ 09 июля 2020

Я делаю приложение React. js, которое использует аудиоплеер для воспроизведения фрагмента песни в зависимости от того, что выбирает пользователь. Однако я понимаю, что когда я go запускаю приложение, звук никогда не загружается. Итак, первое, что я сделал, это убедился, что я вообще получаю URL-адрес от сервера. Убедившись в этом, я подумал, что, возможно, мне понадобится npm package, чтобы сделать эту работу за меня. Хотя я также попробовал два пакета npm, и они не дали мне того, что я хотел, с точки зрения конечного результата. Поэтому я все еще пытаюсь понять, почему аудиотег не сработал в первый раз и почему он был отключен.

Код: 

import React, { useState, useEffect } from 'react';
import Aux from '../../hoc/Aux';
import Navbar from './Navbar';
import WeekSelection from './WeekSelection';
import axios from 'axios';

const Landing = () => {

    //useState to set up information

    
           

    const [formData, setFormData] = useState({
        name: '',
        artist: '',
        album: '',
        duration: '',
        image: '',
        url: '',
        day: null
    });


    const [numberCharts, setNumberCharts] = useState({
        numberOne: {
            name: null,
            artist: null
        },
        numberTwo: {
            name: null,
            artist: null
        },
        numberThree: {
            name: null,
            artist: null
        },
        numberFour: {
            name: null,
            artist: null
        },
        numberFive: {
            name: null,
            artist: null
        }
 
    });







    useEffect(() => {
      axios.post("/")
        .then(res => {
            console.log(res);
            
            let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            let dayOfWeek = days[new Date().getDay()];


            console.log("URL",res.data.url);

            setFormData({
                name: res.data.name, 
                artist: res.data.artist, 
                album: res.data.album, 
                duration: res.data.duration, 
                image: res.data.image,
                url: res.data.url,
                day: dayOfWeek
            });


            setNumberCharts({
                numberOne: {
                    name: res.data.topFive.numberOne.name,
                    artist: res.data.topFive.numberOne.artist
                },
                numberTwo: {
                    name: res.data.topFive.numberTwo.name,
                    artist: res.data.topFive.numberTwo.artist
                },
                numberThree: {
                    name: res.data.topFive.numberThree.name,
                    artist: res.data.topFive.numberThree.artist
                },
                numberFour: {
                    name: res.data.topFive.numberFour.name,
                    artist: res.data.topFive.numberFour.artist
                },
                numberFive: {
                    name: res.data.topFive.numberFive.name,
                    artist: res.data.topFive.numberFive.artist
                }
            });


        })
        .catch(err => {
          console.error(err.message);
        });

    }, []);



   




    return (
         
        <Aux>
            <Navbar />
            <div className="myLeft">

                <div className="company-name">
                    <span className="headphones">
                        <i className="fas fa-headphones"></i>
                    </span>
                    <h1 className="titleStyle">SilverStone</h1>
                </div>

                <WeekSelection currentRank="NO. 1" song={numberCharts.numberOne.name} artist={numberCharts.numberOne.artist}/>
                <WeekSelection currentRank="NO. 2" song={numberCharts.numberTwo.name} artist={numberCharts.numberTwo.artist}/>
                <WeekSelection currentRank="NO. 3" song={numberCharts.numberThree.name} artist={numberCharts.numberThree.artist}/>
                <WeekSelection currentRank="NO. 4" song={numberCharts.numberFour.name} artist={numberCharts.numberFour.artist}/>
                <WeekSelection currentRank="NO. 5" song={numberCharts.numberFive.name} artist={numberCharts.numberFive.artist}/>

            </div>

            <div className="myRight">
                 
            <div className="test">
                <img src={formData.image} alt="Spotify Cover Art" />
            </div>

            <div className="song-data">
                <h2 className="week">{formData.day}</h2>



                <div className="song-box-data">
                    {/* <div className="rectangle-1"></div> */}
                    <p className="song-styles">Song</p>
                    {/* <div className="music-icon"></div> */}
                    
                </div>
                <div className="seeYouAgain">{formData.name}</div>
                <div className="artist-line">                
                    <div className="by">By: {formData.artist}</div>
                    {/* <div className="artist-line-name">{formData.artist}</div> */}
                </div>
                <div className="time-info">                
                    <div className="duration">Duration</div>
                    <div className="minutes">{formData.duration} Min</div>
                    {/* <div className="clock">
                        <i className="far fa-clock"></i>
                    </div> */}
                </div>

                <audio controls preload="auto">
                    <source src={formData.url} type="audio/mp3"/>
                </audio>



            </div>
            </div>

           

        </Aux>

     
    )
};


export default Landing;

URL: 

https://p.scdn.co/mp3-preview/8db0f8fc6607d9760f1ac26f0d7d54b1c458b9ac?cid=907576181422448e91e222b424ba898a

Когда я ввожу URL вручную, он работает нормально, но когда я делаю это динамически, он НЕ работает.

Ответы [ 2 ]

1 голос
/ 09 июля 2020

Вы манипулируете mp3-файлом, на который ссылается элемент управления звуком, но не запускаете загрузку. Проблема в том, что, в отличие от многих c HTML, управление звуком имеет состояние, и даже если предустановка включена, она контролирует его поведение только при полной загрузке страницы.

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

const AudioControl = ({url}) => {
    
    //We're pulling this by ID - use the uuid library to avoid collisions if you have multiple 
    const controlId = "use-uuid-if-multiple-on-page";

    useEffect(() => {
        const audioControl = document.querySelector(`#${controlId}`);
        if(audioControl) {
            //Register the changed source
            audioControl.load();
        }
    })
    
    return <audio id={controlId} controls preload="auto">
        <source src={url} type="audio/mpeg"/>
    </audio>

}

Это создает автономный элемент управления, который обновляется всякий раз, когда URL-адрес изменяется как опора.

0 голосов
/ 09 июля 2020

Попробуйте audio/mpeg vs audio/mp3

т.е. 

    <audio controls preload="auto">
                <source src={formData.url} type="audio/mpeg"/>
            </audio>
...