在 NextJS 中点击播放 MP3

Question

我是 JS 框架的新手，我可能会弄错 function 语法。 这就是我所拥有的，我的想法是，单击按钮后，它将播放一个快速音频文件，该文件在音频标签中的按钮下方指定。 知道如何让这个工作吗？

import Head from 'next/head'

export default function Home() {
  function play() {
    var audio = document.getElementById('a1');
    audio.play();
  }

  return (
    <div className='home'>
      <Head>
        <title>Create Next App</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <div className='container'>
        <div className='col'>
          <button onClick={play()}>Click</button>
          <audio id='a1' src='/static/src.mp3'></audio>
      </div>

Answer 1

您不应该用括号调用 function 而是传递引用。 尝试这个：

   <button onClick={play}>Click</button>

Answer 2

<button onClick={play}>Click</button>
<audio id='a1'>
  <source src='/static/src.mp3' type='audio/mpeg' />
  Your browser does not support the audio element.
</audio>

也许 src 有问题，您可以在您的 src https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3上进行测试

或者您可以使用useRef来定位元素而不是document.getElementById

Answer 3

您可能想尝试使用useRef保存对<audio />标签的引用：

import { useRef } from 'react';

export default function Home() {
  const audioRef = useRef();

  const play = () => {
    if (audioRef.current) {
      audioRef.current.play()
    } else {
      // Throw error
    }
  }

  return (
    <div>
      <button onClick={play}>Play</button>
      <audio ref={audioRef} src='/static/src.mp3' />
    </div>
  )
}

在 NextJS 中点击播放 MP3

问题描述

3 个解决方案

解决方案1
0 2020-05-19 14:45:49

解决方案2
0 2021-03-29 17:39:50

解决方案3
0 2023-02-01 14:41:58

在 NextJS 中点击播放 MP3

问题描述

3 个解决方案

解决方案1 0 2020-05-19 14:45:49

解决方案2 0 2021-03-29 17:39:50

解决方案3 0 2023-02-01 14:41:58

解决方案1
0 2020-05-19 14:45:49

解决方案2
0 2021-03-29 17:39:50

解决方案3
0 2023-02-01 14:41:58