如何在播放列表中使用ReactHowler

Question

我从外部源获取一个播放列表，作为一个JSON对象，其中包含一个曲目的标题，但也包含到音频文件的URL。我正在通过一个<li>将这个对象映射到<ul>元素，但是我无法让它工作。我安装了Howler和HowlerReact，但是在页面上我得到了以下错误：

undefined

• Howl.playing

• node_modules/howler/dist/howler.js:1691

的

• TypeError:无法读取属性“长度”

这是我的密码：

import React, { useState } from 'react';
import ReactHowler from 'react-howler'
import Async from 'react-async';

const loadTracks = () =>
    fetch('...')
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json());

const Music = () => {
    const [ play, setPlay ] = useState({
        currentTrack: null,
        play: false
    });

    return (
        <ul className="music">
            <ReactHowler src={currentTrack} playing={play} />
            <Async promiseFn={loadTracks}>
                <Async.Loading>Loading...</Async.Loading>
                <Async.Fulfilled>
                    {data => {
                        return (
                            Object.keys(data[title].tracks).map(track => {console.log(data[title].tracks);
                                return(
                                <li key={data[title].tracks[track].filename}>
                                    <button 
                                        data-permalink={data[title].tracks[track].title}
                                        onClick={() => setPlay({currentTrack: data[title].tracks[track].filename, play: !play})}>
                                        {data[title].tracks[track].title}
                                    </button>
                                </li>
                            )})
                        )
                    }}
                </Async.Fulfilled>
                <Async.Rejected>
                    {error => `Something went wrong: ${error.message}`}
                </Async.Rejected>
            </Async>
        </ul>
    );
}

export default Music;

我还没有熟悉反应功能组件，我了解基本知识，但我不知道如何将它与诸如音频播放器之类的东西结合起来。

我并不是特别喜欢Howler，所以任何关于如何让它工作的建议都是非常受欢迎的。

Answer 1

我让它使用一个普通的HTML5音频元素，不需要豪勒：

import React, { useState, useEffect, useRef } from 'react';
import Async from 'react-async';

function countDown(duration, time) {
    if (!isNaN(time)) {
        var timeLeft = duration - time;
        return (
            Math.floor(timeLeft / 60) + ":" + ("0" + Math.floor(timeLeft % 60)).slice(-2)
        );
    }
}

const loadTracks = () =>
    fetch('...')
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json());

const Music = () => {
    const player = useRef(null);
    const [ state, setState ] = useState({
        currentTrack: null,
        currentTime: null,
        duration: null
    });
    let currentTime = getTime(state.currentTime);
    let duration = getTime(state.duration);
    let timeLeft = countDown(state.duration, state.currentTime);
    let currentTrack = null;

    useEffect(() => {
        if (state.currentTrack) {
            player.current.src = state.currentTrack;
            player.current.play();
        }
        player.current.addEventListener('timeupdate', e => {
            setState(prevState => ({
                currentTime: e.target.currentTime,
                duration: e.target.duration,
                currentTrack: prevState.currentTrack
            }));
        });

        return function cleanup() {
            player.current.removeEventListener('timeupdate', () => {});
        }
    }, [state.currentTrack]);

    return (
        <ul className="music">
            <Async promiseFn={loadTracks}>
                <Async.Loading>Loading...</Async.Loading>
                <Async.Fulfilled>
                    {data => {
                        return (
                            Object.keys(data[title].tracks).map(track => {console.log(data[title].tracks);
                                return(
                                <li key={data[title].tracks[track].filename}>
                                    <button 
                                        data-permalink={data[title].tracks[track].title}
                                        onClick={() => setState({currentTrack: data[title].tracks[track].filename})}>
                                        {data[title].tracks[track].title}
                                    </button>
                                </li>
                            )})
                        )
                    }}
                </Async.Fulfilled>
                <Async.Rejected>
                    {error => `Something went wrong: ${error.message}`}
                </Async.Rejected>
            </Async>
        </ul>
    );
}

export default Music;