เล่นไฟล์เสียงด้วย HTML5 และ Jquery ตอนที่ 1

หากพูดถึง HTML แล้ว ณ ตอนนี้คงเป็น เวอร์ชั่นที่ 5 แล้วหรือ HTML 5 นั้นเอง ซึ่งใน HTML 5 นี้สามารถเล่นไฟล์เสียงได้แล้วโดยไฟล์เสียงนี้แค่ใช้ tag 1 ใน HTML เท่านั้น เหมือนกับรูปภาพ เหมือน HTML 5 รองรับไฟล์เสียงแล้ว เราก็ใช้ความสามารถของ Jquery เพื่อควบคุมปุ่นในการสั่งให้เล่นแล้วก็หยุดเล่นไฟล์เสียง โดยใน HTML 5 นั้นจะรองรับไฟล์เสียง นามสกุล ogg กับ mp3 ซึ่งถ้าจะหาโปรแกรมแปลงไฟล์เสียงให้เป็น ogg ผมก็แนะนำโปรแกรม Audacity ซึ่งเป็นฟรีแวร์สามารถหา Download กันได้นะครับ

เริ่มแรกก่อนจะเขียน HTML 5 นั้น text editor หรือ IDE นั้นจะไม่มี template html 5 เราสามารถไป Download html5 boiler plate โดยเลือกเวอร์ชั่นไหนก็ได้แต่ผมเลือกเวอร์ชั่น stripped จากนั้นก็โหลด Jquery เพื่อใช้ในการควบคุม event ต่อมาก็เตรียมไฟล์เสียง เอาละมาเขียนโค้ดกัน เมื่อเราแตกไฟล์ที่โหลดมา html5 boiler plate ก็จะได้ดังรูป

html

ให้ทำการแก้ไขไฟล์ index.html เมื่อเปิดไฟล์ขึ้นมาจะเจอ tag script

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

ซึ่งจะเป็น jquery ที่อยู่บน server ของ google ถ้าหากเราจะเปลี่ยนมาใช้ jquery ที่เราโหลดมาไว้บนเครื่องก็ได้แต่ต้องเปลี่ยน src มาเป็นไฟล์บนเครื่องเรา แต่ผมขอไม่เปลี่ยนละกัน ตอนแรกก็ลองว่างโค้ด tag audio ตรงช่วงระหว่าง <div role=”main”> </div> ดูผลลัพธ์ได้ดังรูปข้างล่าง

<audio controls=”controls”>
<source src=”sounds/DST-JungleHaze.ogg” type=”audio/ogg” />
Your browser does not support the audio tag.
</audio>

html5

ลืมบอกไปว่าผมเตรียมไฟล์เสียงใน folder sounds ซึ่งผมได้สร้างขั้นเอง จะเห็นว่า html 5 เมื่อลองรับไฟล์เสียงทำให้เวลาเข้าเว็บพวกฟังเพลงก็สะดวกกว่าแต่ก่อนที่ต้องลง plug in พวก window media player ซึ่งทำให้หยุดยากและเครื่องค้างในบ้างครั้ง แต่ html 5 จะลองรับบน web brower รุ่นใหม่ๆนะครับ โดย ie ต้อง version 8 ขึ้นไปนะครับส่วน firefox กับ chrome ก็ต้องรุ่นใหม่ๆก็รองรับแล้วครับ

ส่วนวิธีใช้ jquery ในการเล่นไฟล์เสียงนั้นผมจะมาเขียนต่อในบทความหน้านะครับ

Download SourceCode

Leave a Reply

Your email address will not be published. Required fields are marked *