効果音

'use client';
 
import { Button } from '@/app/components/ui/button';
import { Howl } from 'howler';
import { Volume2 } from 'lucide-react';
import { useState } from 'react';
 
export default function Demo() {
  const [playing, setPlaying] = useState(false);
  const sound = new Howl({
    src: ['/recipes/sound/demo.mp3'],
    volume: 0.2,
    onplay() {
      setPlaying(true);
    },
    onend() {
      setPlaying(false);
    },
  });
 
  return (
    <Button
      disabled={playing}
      variant="outline"
      size="icon"
      onClick={() => sound.play()}
    >
      <Volume2 size={20} />
    </Button>
  );
}