- เครดิต
- 2411
- พลังน้ำใจ
-
- Point
-
|
เป็นโค๊ดกล่องเพลง ที่มีปุ่ม Play & แทบเล่นเพลง และ ปุ่มปรับเสียง
ซึ่งจาก html นั้นมีมาให้อยู่แล้ว โดยใช้คำสั่งดังนี้
- <audio controls>
- <source src="ชื่อไฟล์.นามสกุลไฟล์" type="โฟเดอร์ที่เก็บเสียง">
- browser ของคุณไม่รองรับฟังชั่นนี้.
- </audio>
ตัวอย่างการใช้โค๊ดเล่นเสียงจาก mp3 โดยให้ผู้เล่นกดปุ่ม play เอง
- <audio controls>
- <source src="sound.mp3" type="audio/mp3">
- browser ของคุณไม่รองรับฟังชั่นนี้.
- </audio>
ไฟล์ 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
|
|
ดู IP ของสมาชิก
ดูสถานะออนไลน์
โพสต์ 2016-4-2 17:48:25
ดันกระทู้
ปักหมุดกระทู้
ปิดกระทู้
เปิดกระทู้
การ์ดสีสัน
เลื่อนกระทู้ให้อยู่ที่ 1
การ์ดล่องหน
โพสต์ 2016-4-13 08:19:27