javascript 在NextJS中点击播放MP3

dbf7pr2w 于 2023-02-02 发布在 Java

关注(0)|答案(3)|浏览(157)

我是JS框架的新手，我可能会把函数语法弄错。这是我的想法，点击按钮后，它会播放一个快速的音频文件，这个文件在音频标签中的按钮下面指定。有什么想法我可以让这个工作吗？

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>

JavaScript

来源：https://stackoverflow.com/questions/61892655/play-an-mp3-on-click-in-nextjs

3条答案

按热度按时间

carvr3hs1#

你不应该用括号调用函数，而应该传递引用。

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

赞(0）回复(0）举报 2023-02-02

cuxqih212#

<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来定位元素

赞(0）回复(0）举报 2023-02-02

3npbholx3#

您可能希望尝试使用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>
  )
}

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 在NextJS中点击播放MP3

3条答案

相关问题

热门标签

最新问答