เนื้อหานี้ถือว่ากลับมาอัพเดทบทความกันบ้าง
หลังจากห่างหายไปสักระยะหนึ่ง โดยตอนต่อไปนี้
จะมาประยุกต์การใช้งาน Web Speech API ซึ่งเราได้ทำเป็น
บทความเกี่ยวกับการใช้งานไว้นานแล้ว และยังสามารถ
ใช้งานได้ปกติ ทบทวนได้ที่บทความ
การใช้งาน web speech api แปลงเสียง เป็นข้อความ ใน html5 http://niik.in/558
https://www.ninenik.com/content.php?arti_id=558 via @ninenik
สำหรับการประยุกต์ครั้งนี้ เราจะประยุกต์ใช้งานกับ css bootstrap และใช้ awesome font
ประกอบ ทั้งนี้เพราะ สามารถจัดรูปแบบการแสดงได้ง่าย แต่หากใครเข้าใจแนวทางแล้ว สามารถนำไปปรับ
ใช้กับ css framework ตัวอื่นๆ ได้ตามต้องการ
ใช้กับ css framework ตัวอื่นๆ ได้ตามต้องการ
สิ่งที่เราจะสร้างก็คือ jQuery Web Speech Plugin ที่ให้เราสามารถกำหนด ให้ input
และ textarea สามารถกรอกข้อมูล โดยการพูดผ่านไมโครโฟน แทนการ
พิมพ์ข้อความได้ ดังนั้นเราต้องรู้จักพื้นฐานการสร้าง jQuery Plugin ก่อน สามารถ
ดูแนวทาง ได้ที่บทความเกี่ยวกับการสร้าง jQuery Plugin ตามหัวข้อด้านล่าง มี 5 ตอน
เริ่มต้นสร้าง jQuery plugin อย่างง่าย ตอนที่ 1 http://niik.in/470
https://www.ninenik.com/content.php?arti_id=470 via @ninenik
ไฟล์เริ่มต้น demo.php
<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" >
</head>
<body>
<br><br>
<div class="m-auto p-10 mt-5" style="width: 600px">
<form action="" method="post" accept-charset="utf-8">
<div class="form-group row">
<label for="news_title" class="col-3 col-form-label">หัวข้อ</label>
<div class="col-9">
<input type="text" class="form-control" name="news_title"
autocomplete="off" value="" required>
<div class="invalid-feedback">
กรุณากรอก หัวข้อ
</div>
</div>
</div>
<div class="form-group row">
<label for="news_detail" class="col-3 col-form-label">รายละเอียด</label>
<div class="col-9">
<textarea class="form-control" name="news_detail" rows="3"
autocomplete="off" required ></textarea>
<div class="invalid-feedback">
กรุณากรอก รายละเอียด
</div>
</div>
</div>
<div class="form-group row">
<div class="col-4 offset-3 text-right pt-3">
<button type="submit" name="btn_add" value="1" class="btn btn-primary btn-block">เพิ่มข้อมูล</button>
</div>
</div>
</form>
</div>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
});
</script>
</body>
</html>
เราจะเริ่มต้นด้วยรูปแบบฟอร์ม สมมติเป็นฟอร์มสำหรับกรอกข้อมูลข่าวประกาศ มีหัวข้อ
และรายละเอียด เป็น input และ textarea หน้าตาจะประมาณนี้
รูปแบบที่เราต้องการ จะใช้ input group และมีหน้าตาเป็นดังนี้
นั่นคือ เราจะใช้ส่วนของโค้ดด้านล่าง คลุมส่วนของ input หรือ textarea ที่เราต้องการ
<div class="input-group">
<div class="input-group-prepend" style="cursor: pointer">
<span class="input-group-text"><i class="far fa-times-circle"></i></span>
</div>
<!-- แทรก ส่วนของ input หรือ textarea ที่เราจะใช้งาน ตรงนี้ -->
<div class="input-group-append" style="cursor: pointer">
<span class="input-group-text"><i class="fas fa-microphone"></i></span>
</div>
</div>
โดยปุ่มด้านหน้า เราต้องการให้สำหรับ reset หรือล้างค่าข้อมูล และปุ่มด้านหลังที่เป็นไมโครโฟน
สำหรับการเริ่มต้นการกรอกข้อมูล โดยใช้งานผ่านการพูดแทนการพิมพ์ปกติ เราอาจจะกำหนด effect เช่น
เปลี่ยนสีเป็นสีเหลืองขณะกำลังรับข้อความเสียง เปลี่ยนสีเขียวเมื่อเริ่มการรับข้อความเสียง เปลี่ยนเป็นค่า
เริ่มต้น เมื่อเสร็จสิ้นหรือยกเลิกการรับข้อความเสียง เป็นต้น
รูปแบบ input group ข้างต้นเป็นแนวทางที่เราจะกำหนด โดยจะใช้ jquery plugin ที่เราจะสร้างขึ้นเป็นตัว
จัดการ เราไม่ต้องแทรกโค้ดใดๆ เข้าไปในขั้นตอนนี้
เริ่มต้นสร้าง jQuery Web Speech Plugin
ในขั้นตอนนี้เราจะสร้างไว้ในไฟล์เดียวกันก่อน คือไว้ในไฟล์ demo.php เลย สมมติในที่นี้ใช้ชื่อ plugin
เป็นชื่อว่า type4me ก็จะได้ส่วนล่างของโค้ดเราเป็นดังนี้
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
// JavaScript Document
(function($){
// type4me คือชื่อของ plugin ที่เราต้องการ
$.fn.type4me = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options
// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
var defaults={
};
// ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด
var settings = $.extend( {}, defaults, options );
/// คืนค่ากลับ การทำงานของ plugin
return this.each(function() {
// โค้ตสำหรับ การทำงานของ plugin
});
};
})(jQuery);
$(function(){
});
</script>
ต่อไปเราจะทำการเรียกใช้ plugin โดย plugin จะเริ่มต้นด้วยการครอบ element ที่เราเลือกด้วยรูปแบบที่กำหนด
ตามที่ได้กล่าวไปในตอนต้น คือใช้ input group จะได้เป็นดังนี้
<script type="text/javascript">
// JavaScript Document
(function($){
// type4me คือชื่อของ plugin ที่เราต้องการ
$.fn.type4me = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options
// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
var defaults={
};
// ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด
var settings = $.extend( {}, defaults, options );
/// คืนค่ากลับ การทำงานของ plugin
return this.each(function() {
// โค้ตสำหรับ การทำงานของ plugin
$(this)
.wrap('<div class="input-group">')
.before(`
<div class="input-group-prepend" style="cursor: pointer">
<span class="input-group-text"><i class="far fa-times-circle"></i></span>
</div>
`)
.after(`
<div class="input-group-append" style="cursor: pointer">
<span class="input-group-text"><i class="fas fa-microphone"></i></span>
</div>
`); // ใช้ back qoute กดปุ่ม alt + 96
});
};
})(jQuery);
$(function(){
$("input[name='news_title'],textarea[name='news_detail']").type4me();
// เราจะใช้เป็นการอ้างอิงผ่าน class แทน เนื่องจากทั้ง input และ textarea ใช้งาน css class ชื่อ
// form-control เราก็สามารถเรียกใช้ plugin เป็นดังนี้แทนได้
// $(".form-control").type4me();
});
</script>
ข้างต้น เราได้ทำการสร้าง plugin เพื่อเพิ่ม tag html เพื่อจัดรูปแบบให้กับ element ที่เราเรียกใช้งาน plugin
สังเกตส่วนของ
return this.each(function() {};
เป็นการวนลูปจัดรูปแบบ element ที่เราใช้งาน plugin ซื่งในเบื้องต้น เราต้องการใช้งาน input group เพื่อครอบ
กลุ่มของปุ่มด้วยคำสั่ง wrap() และแทรกปุ่มด้านหน้าด้วย before() และปุ่มด้านหลังด้วย after()
ปกติถ้าเราต้องการสร้าง plugin เพื่อจัดรูปแบบธรรมดา และไม่มีการใช้งานหรือการทำคำสั่งเพิ่มเติม เราจะสามารถ
ใช้รูปแบบข้างต้นได้เลย แต่ในความเป็นจริง และโดยส่วนใหญ่ ก็จะต้องมีการคำสั่งเพิ่มเติม เช่นปุ่มด้านหน้า และ
ปุ่มด้านหลังของ element ที่เรีรยกใช้งาน plugin ต้องสามารถทำคำสั่งที่เราต้องการได้ ดังนั้นเราจึงจำเป็นต้อง
หนดแต่ละส่วนเป็น ตัวแปร object รวมทั้งใช้การอ้างอิง key หรือ index ของ element เพื่อระบุว่าเป็น ปุ่มของ
element ตัวใดด้วย กรณีที่มีการใช้งาน plugin พร้อมๆ กันหลาย element เราจะปรับโค้ดเป้นดังนี้
ดูโค้ดสุดท้ายสำหรับตอนนี้ตามด้านล่าง
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
// JavaScript Document
(function($){
// type4me คือชื่อของ plugin ที่เราต้องการ
$.fn.type4me = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options
// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
var defaults={
btnSpeakObj:[],
btnResetObj:[],
};
// ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด
var settings = $.extend( {}, defaults, options );
/// คืนค่ากลับ การทำงานของ plugin
return this.each(function(k, ele) { // กำหนดใช้งาน key หรือ index
// โค้ตสำหรับ การทำงานของ plugin
settings.btnResetObj[k] = $(`
<div class="input-group-prepend" style="cursor: pointer">
<span class="input-group-text"><i class="far fa-times-circle"></i></span>
</div>
`);
settings.btnSpeakObj[k] = $(`
<div class="input-group-append" style="cursor: pointer">
<span class="input-group-text"><i class="fas fa-microphone"></i></span>
</div>
`);
// ใช้ back qoute กดปุ่ม alt + 96
$(this)
.wrap('<div class="input-group">')
.before(settings.btnResetObj[k])
.after(settings.btnSpeakObj[k]);
// กำหนดการทำงานปุ่ม เริ่มพิมพ์ด้วยเสียง
settings.btnSpeakObj[k].click(function(e) {
e.preventDefault();
console.log('Microphone click');
});
// ภ้ากดปุ่ม reset ข้อความ
settings.btnResetObj[k].click(function(e) {
e.preventDefault();
console.log('reset click');
});
});
};
})(jQuery);
$(function(){
$(".use-voice").type4me();
});
</script>
</body>
</html>
โค้ดข้างต้น เราได้เพิ่ม ตัวแปร option ค่าเริ่มต้นเป็น ปุ่มของไมโครโฟน และปุ่มรีเซ็ต โดยใช้เป็นแบบ array
เพื่ออ้างอิงแต่ละ element ที่เรียกใช้ plugin เนื้อหาเกี่ยวกับการกำหนด option ดูเพิ่มเติมที่หัวข้อ
ส่งค่า options เพิ่มเติม เข้าไปใน jquery plugin ตอนที่ 3 http://niik.in/472
https://www.ninenik.com/content.php?arti_id=472 via @ninenik
สังเกตว่าในส่วนของการวนลูปจัดการ เรามีการใช้ key หรือ index สำหรับ อ้างอิงเข้ามา
return this.each(function(k, ele) { // กำหนดใช้งาน key หรือ index }
และในส่วนของการเรียกใช้ option ค่าเริ่มต้น เราก็เรียกใช้งานผ่าน settings object ตามด้วยชื่อของ
option ที่ต้องการ และกำหนด key ด้วยตัวแปร k เช่น เรากำหนด object สำหรับปุ่ม reset ค่าเป้น
settings.btnResetObj[k] = $(`
<div class="input-group-prepend" style="cursor: pointer">
<span class="input-group-text"><i class="far fa-times-circle"></i></span>
</div>
`);
จากเดิมเรากำหนดเป็น tag html แล้วแทรกเข้าไปคำสั่ง before() คราวนี้เราสร้างเป็นตัวแปร object แล้ว
ใช้ตัวแปรแทรกไปแทน
.before(settings.btnResetObj[k])
นอกจากนั้นเรากำหนดการทำงานให้กับปุ่ม เช่น ปุ่ม reset ก็กำหนดเป็น
// กำหนดการทำงานปุ่ม เริ่มพิมพ์ด้วยเสียง
settings.btnSpeakObj[k].click(function(e) {
e.preventDefault();
console.log('Microphone click');
});
จะเห็นว่า เมื่อเรากำหนดแยกเป็นตัวแปร object ทำให้สามารถจัดการกับส่วนต่างๆ ได้มากขึ้น
ดูตัวอย่างใน DEMO ด้านล่าง
สำหรับเนื้อหาตอนแรกก็จะประมาณนี้ก่อน แล้วมาต่อกันในตอนที่ 2
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง