كيفية تشغيل صوت عند الضغط على زر في React.js؟

بشكل بسيط، يمكنك اسناد وظيفة تشغيل الصوت الى حدث الضغط على الزر. نشغل الصوت عن طريق الجافاسكربت بشكل عادي كـ:

let audio = new Audio("/audio.mp3")

ثم الحدث start:

const start = () => {
    audio.play()
}

وأخيرا استهداف الحدث onClick:

<button onClick={start}>Play</button>

يكون كاملا:

import React from 'react';

function App() {
  let audio = new Audio("/audio.mp3")

  const start = () => {
    audio.play()
  }

  return (
    < div >
      <button onClick={start}>تشغيل</button>
    </div >
  );
}

export default App;

يمكنك استعمال  useSound hook التثبيت:

npm install use-sound

التضمين:

import useSound from 'use-sound'
import mySound from '../assets/sounds/yourSound.mp3' // ملف الصوت


function MyButton(){
	// ربط الملف مع دالة التحكم
  const [playSound] = useSound(mySound)
  
  return (
    <button onClick={() => playSound()}>
       Play Sound زر التحكم لتشغيل الصوت
    </button>
  )
}