حول تشغيل الأوديو تلقائيا react js

بالإمكان تحقيق هذا السلوك عن طريق إضافة بعض الشروط والدوال لتعيين  حالة التشغيل (playing state) بمجرد تحميل المسار الصوتي الجديد.

فيتم تحميل الملف الجديد باستخدام دالة useEffect و setAudio, حيث تُحدث الدالة setAudio حالة audio الجديدة وتقوم بتشغيلها عند تحميل الملف الصوتي الجديد.

ولتعيين حالة التشغيل (playing state) بشكل تلقائي بعد تحميل الملف الصوتي الجديد، يمكن إضافة المعلمة autoplay إلى الصوت الجديد قبل تعيين حالة audio الجديدة كما يلي:

setAudio(new Audio(src));
audioRef.current = new Audio(src);
audioRef.current.autoplay = true; // تشغيل الصوت تلقائياً

وبذلك يتم ضبط حالة التشغيل (playing state) بشكل تلقائي بمجرد تحميل الملف الجديد، وعند النقر على الأزرار Previous أو Next يمكن تغيير المسار الصوتي الحالي والتشغيل التلقائي سيتم بشكل تلقائي.

بتاريخ 2 دقائق مضت قال Mustafa Suleiman:

audioRef.current.autoplay = true; // تشغيل الصوت تلقائياً

نعم صحيح عندما قمت بتحويل الموسيقى و هي في حالة إشتغال إشتغلت الموسيقى.

المشكل في هذه الحالة هو عندما تكون الموسيقى لا تشتغل و أمرر الموسيقى التالية (في هذه الحالة من المفروض تشتغل ألا بعد النقر على زر التشغيل) تشتغل الموسيقى بصفة تلقائية.

في تلك الحالة المشكلة تتعلق بحالة التشغيل (playing state) عند تغيير المسار الصوتي.

باستطاعتك استخدام الحالة (state) في React لتتبع حالة التشغيل (playing state) وتحديثها عند الحاجة.

مثلاً، يمكنك تعريف حالة (state) جديدة تسمى isPlaying في المكون الذي يحتوي على العناصر التي تتحكم في المشغل والتي يتم تمريرها إلى العنصر المسؤول عن تشغيل الصوت كخاصية isPlaying عند تغيير المسار الصوتي.

في الأسفل مثال لإعادة ترتيب المكون الذي يتحكم في تشغيل الصوت بحيث يتبع حالة التشغيل بشكل صحيح:

function AudioPlayer({ tracks }) {
  const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);

  const audioRef = useRef(null);

  const handlePlayPause = () => {
    if (isPlaying) {
      audioRef.current.pause();
    } else {
      audioRef.current.play();
    }
    setIsPlaying(!isPlaying);
  };

  const handleNextTrack = () => {
    if (currentTrackIndex < tracks.length - 1) {
      setCurrentTrackIndex(currentTrackIndex + 1);
      setIsPlaying(false);
      audioRef.current.src = tracks[currentTrackIndex + 1].src;
    }
  };

  const handlePrevTrack = () => {
    if (currentTrackIndex > 0) {
      setCurrentTrackIndex(currentTrackIndex - 1);
      setIsPlaying(false);
      audioRef.current.src = tracks[currentTrackIndex - 1].src;
    }
  };

  useEffect(() => {
    audioRef.current.src = tracks[currentTrackIndex].src;
    setIsPlaying(false);
  }, [currentTrackIndex, tracks]);

  return (
    <div>
      <audio ref={audioRef} />
      <button onClick={handlePrevTrack}>Previous</button>
      <button onClick={handlePlayPause}>{isPlaying ? 'Pause' : 'Play'}</button>
      <button onClick={handleNextTrack}>Next</button>
    </div>
  );
}

في المثال، يتم تتبع حالة التشغيل في isPlaying ويتم تحديثها عند الحاجة، مما يتيح للمشغل أن يشتغل تلقائيًا عند تحميل الملف الصوتي الجديد.