如何将mp3文件添加到React js文件

Question

我正在尝试为我的react js应用程序播放单个mp3文件。 但是，当我向我的方法添加文件路径时，它无法识别它。 mp3位于应用程序内。

我将路径放入变量中，然后将变量放入html音频元素中。

我如何在文件中播放mp3？

import React, { useState,useEffect } from "react";


const moby = require('../music/mobyPorcelain.mp3')
const Sound = new Audio(moby)


export default function Header()  {
  
  const [playInLoop, setPlayInLoop] = useState(false);

  useEffect(()=> {
    Sound.load();
  }, [])

  useEffect(() => {
    Sound.loop = playInLoop
  },[playInLoop])

  const playSound = () => {
    Sound.play();
  }

  const pauseSound = () => {
    Sound.pause();
  }

const stopSound = () => {
  Sound.pause();
  Sound.currentTime = 0;
}
 

  
    return (
                  <div>
                    <h3>Moby porcelain</h3>
                    <input
                    type='button'
                    className='btn btn-primary mr-2'
                    value='play'
                    onclick={playSound}/>
                    <input
                    type='button'
                    className='btn btn-warning mr-2'
                    value='pause'
                    onclick={pauseSound}/>
                    <input
                    type='button'
                    className='btn btn-danger mr-3'
                    value='stop'
                    onclick={stopSound}/>
                    <label><input type='checkbox' checked={playInLoop} onChange={e => setPlayInLoop(e.target.checked)}/></label>
                  </div>
                  
    );
  
}

Answer 1

这是我尝试调试代码时控制台的外观：

extend the default theme

将<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <div class="relative"> <img class="absolute top-0 left-0" src="https://picsum.photos/536/354" alt="Workplace" width="600" /> <img class="cursor-pointer absolute top-0 left-0 mt-32 ml-40 hover:shadow-outline" src="https://picsum.photos/535/354" width="600" /> </div>重构为onclick，它应该可以工作