แบบทดสอบก่อนเรียน
แบบทดสอบก่อนเรียน
การแทรกเสียงในเว็บเพจ
หากวีดีโอของเราที่เตรียมไว้ มีขนาดที่ใหญ่เกินไป เมื่อแทรกลงไปในเว็บเพจดูไม่เหมาะสมกับเนื้อหา เราสามารถกำหนดขนาดความกว้างและความสูงของวีดีโอได้ การแทรกไฟล์เสียงใน HTML5 สามารถทได้ง่าย ๆ ด้วยกาารกำหนดแท็ก <audio> โดยจะใช้ src เพื่อเลือกไฟล์เสียงใดมาแสดงบนเว็บเพจ
Tag
| ชื่อแท็ก | audio |
| ตำแหน่งแท็ก | อยู่ภายในแท็ก <body>...</body> |
| รูปแบบการใช้แท็ก | <audio scr="url" controls></audio> |
| แอตทริบิวต์ | controls , src |
| ค่า value | url ตำแหน่งของไฟล์เสียง - ตำแหน่งที่อยู่ภายในเว็บไซต์ (src="sound.mp3") - ตำแหน่งรูปภาพที่อยู่เว็บไซต์อื่น (src="http://www.example.com/sound.mp3") |
ตัวอย่างการใช้งาน
<body>
<audio scr="sound.mp3" controls></audio>
</body>
<audio scr="sound.mp3" controls></audio>
การแสดงผล
จากตัวอย่างจะเห็นได้ว่าจะมีการกำหนดเครื่อมือควบคุม พร้อมกับการแทรกไฟล์เสียงเพื่อให้สามารถกำหนดการเล่นได้
การแทรกไฟล์เสียงให้รองรับทุกเบราว์เซอร์
เนื่องจากเบราว์เซอร์แต่ละตัวรองรับไฟล์เสียงที่แตกต่างกันออกไป ดังนั้นเราควรเตรียมไฟล์เสียงให้ครบทุกฟอร์แมต เพื่อให้สามารถเล่นกับเบราว์เซอร์ได้ครบถ้วน
Tag
| ชื่อแท็ก | source |
| ตำแหน่งแท็ก | อยู่ภายในแท็ก <audio>...</audio> |
| รูปแบบการใช้แท็ก | <audio> <source src="url" type="value"> </audio> |
| แอตทริบิวต์ | src |
| ค่า value | url ตำแหน่งของไฟล์เสียง - ตำแหน่งที่อยู่ภายในเว็บไซต์ (src="sound.mp3") - ตำแหน่งรูปภาพที่อยู่เว็บไซต์อื่น (src="http://www.example.com/sound.mp3") type ชนิดวีดีโอ - audio/mp3 - audio/oga |
ตัวอย่างการใช้งาน
<body>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.oga" type="audio/ogg">
</audio>
</body> <source src="audio.mp3" type="audio/mp3">
<source src="audio.oga" type="audio/ogg">
</audio>
การแสดงผล
การแทรกเสียงโดยการใช้แท็ก <source> เข้ามาช่วยก็จะทำให้สามารถแทรกไฟล์เสียงได้หลายรูปแบบ เพื่อรองรับกับเบราว์เซอร์ทุกตัว
