วิธีเล่นไฟล์ Multimedia ด้วย JavaScript

ข้อควรทราบ

ตัวอย่างในบทความต้นฉบับเป็น Animation (ย้ายรูปภาพ) ไม่ใช่การเล่น Multimedia File (Audio/Video) จริงๆ JavaScript สมัยใหม่ใช้ <audio> และ <video> HTML5 Elements ควบคุมด้วย JS API

เล่น Audio ด้วย JavaScript

// 1. สร้าง Audio Object
const audio = new Audio('sound.mp3');

// 2. ควบคุมการเล่น
audio.play();           // เริ่มเล่น
audio.pause();          // หยุดชั่วคราว
audio.currentTime = 0;  // รีเซ็ตไปต้น
audio.volume = 0.5;     // ระดับเสียง 0.0 - 1.0
audio.loop = true;      // วนซ้ำ

// 3. Event Listeners
audio.addEventListener('ended', () => console.log('จบเพลง'));
audio.addEventListener('timeupdate', () => {
  console.log(`Progress: ${audio.currentTime}/${audio.duration}`);
});

เล่น Video ด้วย JavaScript

<video id="myVideo" width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');
  
  video.play();
  video.pause();
  video.currentTime = 30; // กระโดดไป 30 วินาที
  video.playbackRate = 1.5; // เร็วขึ้น 1.5x
  video.muted = true;
  
  video.addEventListener('ended', () => console.log('จบวิดีโอ'));
</script>

ตัวอย่าง Animation (จากต้นฉบับ - ย้ายรูปภาพ)

<html>
<head>
  <title>JavaScript Animation</title>
  <script>
    var imgObj = null;
    function init(){
      imgObj = document.getElementById('myImage');
      imgObj.style.position = 'relative';
      imgObj.style.left = '0px';
    }
    function moveRight(){
      imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
    }
    window.onload = init;
  </script>
</head>
<body>
  <form>
    <img id="myImage" src="/images/html.gif" />
    <p>Click button below to move the image to right</p>
    <input type="button" value="Click Me" onclick="moveRight();" />
  </form>
</body>
</html>

Web Audio API (ขั้นสูง)

สำหรับ Audio Processing ขั้นสูง: Synthesis, Effects, Visualization

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);

oscillator.type = 'sine';
oscillator.frequency.value = 440; // A4
gainNode.gain.value = 0.1;

oscillator.start();
setTimeout(() => oscillator.stop(), 1000);

Media Session API (ควบคุมจาก Lock Screen/Notification)

if ('mediaSession' in navigator) {
  navigator.mediaSession.setActionHandler('play', () => audio.play());
  navigator.mediaSession.setActionHandler('pause', () => audio.pause());
  navigator.mediaSession.setActionHandler('seekbackward', () => audio.currentTime -= 10);
  navigator.mediaSession.setActionHandler('seekforward', () => audio.currentTime += 10);
  
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Song Title',
    artist: 'Artist Name',
    album: 'Album Name',
    artwork: [{src: 'cover.jpg', sizes: '512x512', type: 'image/jpeg'}]
  });
}

สรุป

เล่น Multimedia จริง: ใช้ <audio>, <video> HTML5 + JS API (play, pause, currentTime, volume) สำหรับ Animation ใช้ CSS Transitions/Animations หรือ requestAnimationFrame() ดีกว่า setTimeout