โค๊ด html เล่นเสียงจากไฟล์ mp3 , ogg , wav
เป็นโค๊ดกล่องเพลง ที่มีปุ่ม Play & แทบเล่นเพลง และ ปุ่มปรับเสียงซึ่งจาก html นั้นมีมาให้อยู่แล้ว โดยใช้คำสั่งดังนี้
<audio controls>
<source src="ชื่อไฟล์.นามสกุลไฟล์" type="โฟเดอร์ที่เก็บเสียง">
browser ของคุณไม่รองรับฟังชั่นนี้.
</audio>
ตัวอย่างการใช้โค๊ดเล่นเสียงจาก mp3 โดยให้ผู้เล่นกดปุ่ม play เอง
<audio controls>
<source src="sound.mp3" type="audio/mp3">
browser ของคุณไม่รองรับฟังชั่นนี้.
</audio>ซึ่งผมเก็บไฟล์เสียงไว้ใน audio/mp3/sound.mp3
ไฟล์ index.html หรือ index.php ต้องอยู่แบบนี้นะครับ เพราะโค๊ดจะหาโฟลเดอร์ audio และ โฟลเดอร์ mp3 ในโฟลเดอร์ audio อีกที
โค๊ดสำหรับ ไฟล์ Wav
ซึ่งผมเก็บไฟล์เสียงไว้ใน audio/wav/sound.wav
<audio controls>
<source src="sound.wav" type="audio/wav">
browser ของคุณไม่รองรับฟังชั่นนี้.
</audio>
โค๊ดสำหรับไฟล์ ogg
ซึ่งผมเก็บไฟล์เสียงไว้ใน audio/ogg/sound.ogg
<audio controls>
<source src="sound.ogg" type="audio/ogg">
browser ของคุณไม่รองรับฟังชั่นนี้.
</audio>
คำสั่งเพิ่มเติม
autoplay - เล่นอัตโนมัติเมื่อเปิดหน้าเว็บนี้
controls - กล่อง control สำหรับเล่นเสียง
loop - เมื่อเล่นเสียงเสร็จจะเล่นเสียงซ้ำอีกเรื่อยๆ
ตัวอย่าง
- มีกล่อง control เสียงเพลง และ เล่นอัตโนมัติ
@ ใช้คำสั่ง autoplay และ controls
<audio controls autoplay><source src="01.mp3">
Your browser does not support the audio element.
</audio>
ไฟล์เสียงอยู่ที่เดียวกับ ไฟล์เว็บ ก็ให้เรียกใช้ได้ทันที ไม่ต้องใช้เรียกไฟล์ในโฟเดอร์
- มีกล่อง control เสียงเพลง เล่นอัตโนมัติ และ เล่นซ้ำเรื่อยๆ
<audio controls autoplay loop>
<source src="01.mp3">
Your browser does not support the audio element.
</audio>
- ซ่อนกล่องcontrolเสียงเพลง เล่นอัตโนมัติ เล่นซ้ำเรื่อยๆ
<audio autoplay loop>
<source src="01.mp3">
Your browser does not support the audio element.
</audio>
เป็นต้น
ตัวอย่างโค๊ดแบบเต็ม
- มีกล่อง control เสียงเพลง และ เล่นอัตโนมัติ เล่นซ้ำ่้<html>
<title>กล่องเล่นเพลง</title>
<head>Music Play</head>
<audio controls autoplay loop>
<source src="01.mp3">
Your browser does not support the audio element.
</audio>
</html>
by : Hackerz.in.th
ขอบคุณ
หน้า:
[1]