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

ต่อจากบทความก่อนหน้านี้ เล่นไฟล์เสียงด้วย HTML5 และ Jquery ตอนที่ 1 คราวนี้เราจะมาใช้ความสามารถของ Jquery เพื่อเล่นเสียงและควบคุมการเปิดปิดเสียง เริ่มต้นเราก็ก็อปปี้ไฟล์ index.html มาเป็นไฟล์ใหม่โดยผมจะตั้งชื่อว่า indexjquery.html เพื่อที่เราจะได้เห็นความแตกต่างระหว่างการใช้ tag html 5 กับ jquery ว่า แตกต่างกันอย่างไร เรามาดูโค้ดกันเลยครับตอนแรกเราก็ต้องทำการสร้าง link 2 ลิงค์ให้มี id เป็น play กับ pause เพื่อจะได้เขียน jquery เพื่อควบคุมการเล่นเสียง ต่อมาเราก็สร้างฟังก์ชั่นสำหรับเล่นไฟล์เสียงโดยใช้ javascript ดึงความสามารถในการเล่นเสียงของ browser ที่รองรับ html 5 นั้นเองหลังจากนั้นก็ให้โหลด event ของ link ทั้งสองเมื่อเริ่มโหลดหน้าเว็บ โค้ดในส่วนแรกของการสร้าง link คือ

jquery เล่นไฟล์เสียง
[sourcecode language=”html”]

[/sourcecode]
ต่อมาก็ฟังก์ชั่นในการเล่นเสียง
[sourcecode language=”javascript”]
function playMusic(musicPath, filename) {
music = new Audio();
var soundStub = musicPath + ‘/’ + filename;

if (music.canPlayType(‘audio/ogg’)) {
music = new Audio(soundStub + ‘.ogg’);
} else if (music.canPlayType(‘audio/mp3’)) {
music = new Audio(soundStub + ‘.mp3’);
}

music.load();
}
[/sourcecode]
สุดท้ายก็โหลด event ของ link เมื่อโหลดหน้าเว็บครับ
[sourcecode language=”javascript”]
$(document).ready(function() {
playMusic(‘sounds’, ‘DST-JungleHaze’);

$(‘#pause’).click(function(event){
music.pause();
});

$(‘#play’).click (function(event){
music.play();
});
});
[/sourcecode]
ตัวอย่างผลการรันโปรแกรม

jquery เล่นไฟล์เสียง

ซึ่งใน jquery จะใช้คำสั่ง $(document).ready แบบในโค้ดตัวอย่างส่วน event ของ link ผมกำหนดให้เกิดเหตุการณ์เมื่อ click ที่ link ครับโดยเมื่อหน้าเว็บถูกโหลด มันจะเรียกใช้ function playMusic โดยจะส่ง path และชื่อไฟล์เพลงไป โดยภายในฟังก์ชั่น playMusic นั้นจะมีการตรวจสอบว่ามีไฟล์และ browser นั้นรองรับไฟล์เสียงนามสกุล ogg หรือ mp3 จากนั้นก็โหลดข้อมูลเสียงเข้าไปรอเพียงว่าจะกดปุ่ม play หรือ pause เท่านั้นเองครับ ซึ่งในการ play หรือ pause นั้นเราจะควบคุมผ่านตัวแปร music ที่ได้ทำการโหลดไฟล์เสียงไปแล้ว เวลาเราคลิก link ก็แค่บอกว่าให้หยุดหรือเล่นต่อเท่านั้นเองครับ

จะเห็นว่าโค้ดมันอาจสลับซับซ้อนกว่า tag html5 ธรรมดาแต่มันมีประโยชน์ตรงที่เราสามารถสั่งให้เล่นเสียงตอนไหนก็ได้ตามที่เราต้องการนั้นเองครับ

Download Source

Leave a Reply

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

Designed using Hoot Ubix. Powered by WordPress.