คราวที่แล้ว เราได้เห็นวิธีการใส่วีดีโอกันไปแล้วนะครับ คราวนี้เราลองมาดูเรื่องของการในเพลง เสียงกันบ้างนะครับ ลองมาดูนะครับ ว่าวิธีการ เราจะใส่อย่างไง เอาล่ะครับ อย่ามัวเสียเวลาเลย ไปลองดูกันเลยดีกว่า
ในการใส่เพลง เราจะใช้ <audio> | </audio> วิธีการใส่ก็จะเป็นแบบนี้ครับ
<audio src="song.ogg" controls="controls">
</audio>
เช่นกันครับ ในกรณีที่เรากลัวว่า เบราเซอร์ไม่รองรับ HTML5 จะแสดงผลไม่ได้ เราก็ใส่ ข้อความที่เราอยากให้แสดงเมื่อเบราเซอรแสดงผลไม่ได้เข้าไป เช่น
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
*** ในกรณีนี้ ถ้าเบราเซอร์ที่ไม่รองรับ HTML5 มันจะแสดงผลข้อความ Your browser does not support the audio element. ขึ้นมา
ในกรณีที่อ้างอิงไฟล์เช่น มีไฟล์มากกว่า 1 ที่ หรือมากกว่า 1 แหล่ง เราก็จะกำหนดได้เช่นกัน ดังตัวอย่าง
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
โดยกรณีนี้เบราเวอร์จะแสดงไฟล์ ที่รู้จักเป็นไฟล์แรกขึ้นมา และหากต้องการอ้างอิงแหล่งข้อมูลก็กำหนดได้โดยใช้ TYPE เป็นตัวอ้างอิงครับ
และในกรณีของไฟล์ที่ใช้ในปัจจุบันจะมีดังนี้ครับ
<audio src="song.ogg" controls="controls">
</audio>
เช่นกันครับ ในกรณีที่เรากลัวว่า เบราเซอร์ไม่รองรับ HTML5 จะแสดงผลไม่ได้ เราก็ใส่ ข้อความที่เราอยากให้แสดงเมื่อเบราเซอรแสดงผลไม่ได้เข้าไป เช่น
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
*** ในกรณีนี้ ถ้าเบราเซอร์ที่ไม่รองรับ HTML5 มันจะแสดงผลข้อความ Your browser does not support the audio element. ขึ้นมา
ในกรณีที่อ้างอิงไฟล์เช่น มีไฟล์มากกว่า 1 ที่ หรือมากกว่า 1 แหล่ง เราก็จะกำหนดได้เช่นกัน ดังตัวอย่าง
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
โดยกรณีนี้เบราเวอร์จะแสดงไฟล์ ที่รู้จักเป็นไฟล์แรกขึ้นมา และหากต้องการอ้างอิงแหล่งข้อมูลก็กำหนดได้โดยใช้ TYPE เป็นตัวอ้างอิงครับ
และในกรณีของไฟล์ที่ใช้ในปัจจุบันจะมีดังนี้ครับ
Format | IE 8 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
---|---|---|---|---|---|
Ogg Vorbis | No | Yes | Yes | Yes | No |
MP3 | No | No | No | Yes | Yes |
Wav | No | Yes | Yes | No | Yes |
สำหรับแอททริบิวต์ ที่เราจะใช้ใน tag <audio> มีดังนี้ครับ
Attribute | Value | Description |
---|---|---|
autoplay | autoplay | กำหนดให้เล่นเพลงเมื่อเปิดหน้าเพจทันที |
controls | controls | กำหนดปุ่มควบคุม |
loop | loop | กำหนดจำนวนรอบในการเล่นเพลง |
preload | preload | กำหนดให้พร้อมเล่นทันทีเมื่อเปิดหน้าเพจ |
src | url | อ้างอิงที่อยู่ไฟล์ |