วิธีนี้ใช้ได้ผล:
audio.pause();
audio.currentTime = 0;
แต่ถ้าคุณไม่ต้องการเขียนโค้ดสองบรรทัดนี้ทุกครั้งที่คุณหยุดเสียงคุณสามารถทำหนึ่งในสองอย่างนี้ได้ ครั้งที่สองที่ฉันคิดว่าเหมาะสมกว่าและฉันไม่แน่ใจว่าทำไม "เทพเจ้าแห่งมาตรฐานจาวาสคริปต์" จึงไม่ได้สร้างมาตรฐานนี้
วิธีแรก: สร้างฟังก์ชั่นและส่งเสียง
function stopAudio(audio) {
audio.pause();
audio.currentTime = 0;
}
//then using it:
stopAudio(audio);
วิธีที่สอง (โปรดปราน): ขยายคลาสเสียง:
Audio.prototype.stop = function() {
this.pause();
this.currentTime = 0;
};
ฉันมีสิ่งนี้ในไฟล์จาวาสคริปต์ที่ฉันเรียกว่า "AudioPlus.js" ซึ่งฉันใส่ไว้ใน html ของฉันก่อนที่สคริปต์ใด ๆ ที่จะจัดการกับเสียง
จากนั้นคุณสามารถเรียกใช้ฟังก์ชันหยุดบนวัตถุเสียง:
audio.stop();
ปัญหาโครเมี่ยมในที่สุดด้วย "canplaythrough":
ฉันไม่ได้ทดสอบสิ่งนี้ในเบราว์เซอร์ทั้งหมด แต่นี่เป็นปัญหาที่ฉันเจอใน Chrome หากคุณพยายามตั้งค่า currentTime บนเสียงที่มีฟังเหตุการณ์ "canplaythrough" แนบอยู่คุณจะทริกเกอร์เหตุการณ์นั้นอีกครั้งซึ่งอาจนำไปสู่ผลลัพธ์ที่ไม่พึงประสงค์
ดังนั้นวิธีการแก้ไขคล้ายกับกรณีทั้งหมดเมื่อคุณแนบ listener เหตุการณ์ที่คุณต้องการให้แน่ใจว่าไม่ได้ถูกทริกเกอร์อีกครั้งคือการลบ listener เหตุการณ์หลังจากการเรียกครั้งแรก บางสิ่งเช่นนี้
//note using jquery to attach the event. You can use plain javascript as well of course.
$(audio).on("canplaythrough", function() {
$(this).off("canplaythrough");
// rest of the code ...
});
โบนัส:
โปรดทราบว่าคุณสามารถเพิ่มวิธีการที่กำหนดเองได้มากขึ้นในคลาส Audio (หรือคลาส Javascript ดั้งเดิมใด ๆ สำหรับเรื่องนั้น)
ตัวอย่างเช่นหากคุณต้องการวิธี "เริ่มใหม่" ที่เริ่มเสียงใหม่มันอาจมีลักษณะดังนี้:
Audio.prototype.restart= function() {
this.pause();
this.currentTime = 0;
this.play();
};