ก่อนหน้านี้ เบราว์เซอร์ไม่มีความสามารถในตัวเพื่อรองรับเนื้อหาเสียงและวิดีโอ แต่ด้วยการพัฒนาอินเทอร์เน็ต การรองรับองค์ประกอบมัลติมีเดียจึงกลายเป็นความจำเป็นของเบราว์เซอร์สมัยใหม่ มีการแนะนำองค์ประกอบใหม่ใน HTML5

รูปแบบไฟล์เสียงจะกำหนดโครงสร้างและคุณสมบัติการนำเสนอของข้อมูลเสียงเมื่อจัดเก็บไว้ในสื่อ (อุปกรณ์จัดเก็บข้อมูล) เพื่อขจัดความซ้ำซ้อนของข้อมูลเสียงตามกฎแล้วจะใช้ตัวแปลงสัญญาณเสียงพิเศษซึ่งข้อมูลเสียงจะถูกบีบอัด เบราว์เซอร์สมัยใหม่ รองรับรูปแบบเสียง 3 รูปแบบต่อไปนี้:

เบราว์เซอร์	MP3	Wav	Ogg
ใช่	ใช่	ใช่
ใช่	ใช่	ใช่
โอเปร่า	ใช่	ใช่	ใช่
ใช่	ใช่	ไม่
เช่น	ใช่	ไม่	ไม่
ขอบ	ใช่	ใช่	ไม่

• รูปแบบ MP3เป็นตัวแปลงสัญญาณและคอนเทนเนอร์ในเวลาเดียวกัน มีการใช้กันอย่างแพร่หลายทั่วทุกแห่งเพื่อโฮสต์เพลงที่ดาวน์โหลดได้
• รูปแบบ WAV- ตัวแปลงสัญญาณและคอนเทนเนอร์ในเวลาเดียวกัน
• คอนเทนเนอร์ Ogg + ตัวแปลงสัญญาณเสียง Vorbis... โดยทั่วไปจะเรียกว่า "Ogg Vorbis" พัฒนาโดยชุมชน Xiph เพื่อแทนที่ MP3, AAC และ WMA ที่ได้รับสิทธิบัตร

ประเภท MIME สำหรับเสียง:

รูปแบบ

ประเภท MIME
MP3	เสียง / mpeg
Ogg	เสียง / ogg
Wav	เสียง / wav

รองรับเบราว์เซอร์

แท็ก			โอเปร่า		IExplorer	ขอบ
	4.0	3.5	10.5	4.0	9.0	12.0

คุณลักษณะ

คุณลักษณะ	ความหมาย	คำอธิบาย
เล่นอัตโนมัติ	เล่นอัตโนมัติ	แสดงว่าเสียงจะเริ่มโดยอัตโนมัติทันทีที่พร้อม
การควบคุม	การควบคุม	แสดงตัวควบคุมไฟล์มีเดียในตัว (ปุ่มเล่น / หยุดชั่วคราว ตัวเลื่อนเพื่อข้ามไปยังคลิปที่ต้องการ และตัวเลื่อนระดับเสียง)
ห่วง	ห่วง	การเล่นไฟล์ลูป (เพลงเราดี - เริ่มใหม่) ..
ปิดเสียง	ปิดเสียง	แสดงว่าเสียงจะถูกปิด (ไม่มีเสียง)
พรีโหลด	รถยนต์ ข้อมูลเมตา ไม่มี	ระบุวิธีการโหลดเสียงในการโหลดหน้า แอตทริบิวต์จะถูกละเว้นหากมีแอตทริบิวต์เล่นอัตโนมัติ
src	Url	ระบุ URL ของไฟล์เสียง

ตัวอย่างการใช้งาน

ธาตุ

เสียงใน HTML5

ในตัวอย่างนี้ เรา:

เพิ่มเนื้อหาเสียงในหน้า (tag

หนึ่งในคุณสมบัติที่โดดเด่นที่สุด HTML5กำลังสตรีมเสียง

หากคุณมีส่วนร่วมในด้านการพัฒนาเว็บให้เลือก 10 เครื่องเล่นเสียง HTML5 ที่น่าทึ่งมีประโยชน์มากสำหรับคุณ

- เครื่องเล่นเสียงและวิดีโอซึ่งเขียนด้วย clean HTML5และ CSS... รองรับเบราว์เซอร์รุ่นเก่าด้วย แฟลชและ ซิลเวอร์ไลท์ผู้เล่นเลียนแบบ HTML5 MediaElement API.
MediaElement มีสกินมากมายและรองรับแพลตฟอร์มยอดนิยม เช่น WordPress, Drupal, Joomla เป็นต้น

เครื่องเล่นนี้ค่อนข้างเรียบง่าย แต่ใช้งานได้จริง เหมาะสำหรับเมื่อคุณต้องการเพลย์ลิสต์และเอฟเฟกต์ทันสมัย!

ผู้เล่นที่ยอดเยี่ยมอีกคน ซึ่งน่าจะดีที่สุดในรายการนี้ ข้อดี เนื่องจากมันปรับแต่งได้ง่ายมาก และมีขนาดที่ยืดหยุ่นเพียงพอและปรับแต่งได้ไม่จำกัดจำนวนสี
มี รองรับข้ามเบราว์เซอร์และสำหรับเบราว์เซอร์รุ่นเก่าก็มี แฟลช-อนาล็อก

คุณกำลังใช้ Mootoolsบนเว็บไซต์ของคุณ? ถ้าใช่ บางทีคุณอาจจะชอบเครื่องเล่นนี้ที่ทำใน HTML5และ Mootools JavaScriptกรอบ. โปรแกรมเล่นทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์ที่ทันสมัยทั้งหมด

ผู้เล่นรายนี้เป็นรายเดียวจากรายการที่จ่าย เขามีค่าทุกอย่าง $5 แต่มันทำงานได้อย่างสมบูรณ์ ตัวเล่นมีคุณสมบัติที่มีประโยชน์มากมาย เช่น การปกป้องเสียงของคุณจากการดักฟังโดยการทับซ้อน ซึ่งดีมากสำหรับการใช้งานเชิงพาณิชย์

แหล่งที่มา: http://codecanyon.net/item/universal-html5-audio-player

วี เทคโนโลยีที่เกี่ยวข้อง HTML5และ แฟลชซึ่งทำให้น้ำหนักเบามาก ( 10 Kb) โซลูชันข้ามเบราว์เซอร์ที่เชื่อถือได้สำหรับการเล่นสตรีมเสียง
ต้องการทราบว่าคุณสามารถทำอะไรกับ ตัวจัดการเสียง 2? เยี่ยมชมเพื่อดูการสาธิต!

คำอธิบาย

เพิ่ม เล่น และจัดการการตั้งค่าการบันทึกเสียงบนหน้าเว็บ เส้นทางของไฟล์ถูกระบุผ่านแอตทริบิวต์ src หรือแท็กที่ซ้อนกัน ภายในคอนเทนเนอร์

รายการตัวแปลงสัญญาณที่รองรับโดยเบราว์เซอร์มีจำกัด และแสดงในตาราง 1.

แท็บ 1. ตัวแปลงสัญญาณและเบราว์เซอร์

ตัวแปลงสัญญาณ	Internet Explorer	โครเมียม	โอเปร่า	ซาฟารี	Firefox
ogg / vorbis
wav
mp3
AAC

สำหรับการเล่นแบบสากลในเบราว์เซอร์ที่ระบุ เสียงจะถูกเข้ารหัสโดยใช้ตัวแปลงสัญญาณที่แตกต่างกัน และไฟล์จะถูกเพิ่มพร้อมกันผ่านแท็ก .

ไวยากรณ์

คุณลักษณะ

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

จบแท็ก

ที่จำเป็น.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Alexander Klimenkov - สิบสี่

ผลลัพธ์ของตัวอย่างในเบราว์เซอร์ Opera จะแสดงในรูปที่ 1.

ข้าว. 1. การเล่นไฟล์เสียง

เบราว์เซอร์

การควบคุมการเล่นเสียงจะแตกต่างกันไปตามเบราว์เซอร์ที่ปรากฏ แต่องค์ประกอบพื้นฐานจะเหมือนกัน ปุ่มเหล่านี้คือปุ่มเล่น / หยุดชั่วคราว ความยาวแทร็ก เวลาเล่นที่ผ่านไปและทั้งหมด และระดับเสียง

ด้วยการเชื่อมต่ออินเทอร์เน็ตที่รวดเร็วพอสมควร Flash เป็นเครื่องมือเดียวสำหรับเล่นเสียงบนเว็บไซต์ แต่ HTML5 จะเปลี่ยนวิธีการเล่นเสียงบนอินเทอร์เน็ตโดยพื้นฐาน ในบทความนี้ผมอยากจะบอกคุณโดยละเอียดถึงวิธีการใช้แท็ก บนไซต์ของคุณ

เราใช้

ด้านล่างนี้คือตัวอย่างที่ง่ายที่สุดของการใช้แท็ก โดยจะดาวน์โหลดไฟล์ mp3 และเล่น ใส่ใจในคุณลักษณะ เล่นอัตโนมัติซึ่งใช้ในการเล่นเสียงโดยอัตโนมัติ อย่างไรก็ตาม คุณไม่ควรเล่นเสียงบนไซต์โดยอัตโนมัติ เนื่องจากจะทำให้ผู้ใช้รำคาญ

เล่นเสียงเป็นวง

ต้องการวนรอบเสียง? คุณลักษณะลูปจะช่วยคุณในการทำเช่นนี้ แต่อย่าใช้การเล่นอัตโนมัติและการวนซ้ำในทางที่ผิด หากคุณไม่ต้องการให้ผู้ใช้ออกจากไซต์ก่อนเวลาอันควร

กำลังแสดงส่วนควบคุม

แทนที่จะเล่นเสียงโดยอัตโนมัติ ซึ่งเป็นแนวทางที่ไม่ดีอย่างยิ่ง คุณควรให้เบราว์เซอร์แสดงตัวควบคุมบางอย่าง เช่น ปุ่มปรับระดับเสียงและเล่น (หยุดชั่วคราว) ทำได้โดยง่ายเพียงเพิ่มแอตทริบิวต์ การควบคุม.

รูปแบบไฟล์ต่างๆ

แท็กได้รับการสนับสนุนโดยเบราว์เซอร์ที่ทันสมัยส่วนใหญ่ แต่ปัญหาคือเบราว์เซอร์ที่แตกต่างกันสนับสนุนรูปแบบไฟล์ที่แตกต่างกัน ตัวอย่างเช่น Safari สามารถเล่นไฟล์ MP3 ได้ แต่ Firefox ไม่สามารถเล่นไฟล์ OGG แทนได้ วิธีแก้ปัญหานี้คือการใช้ทั้งสองรูปแบบเพื่อให้ผู้เยี่ยมชมทุกคนสามารถได้ยินเสียง ไม่ว่าพวกเขาจะใช้เบราว์เซอร์ใด

การระบุประเภทไฟล์ MIME

เมื่อใช้รูปแบบไฟล์ที่แตกต่างกัน เป็นการดีที่จะระบุประเภท MIME สำหรับแต่ละไฟล์ เพื่อช่วยให้เบราว์เซอร์โลคัลไลซ์ไฟล์ที่รองรับ สามารถทำได้ง่ายๆ โดยใช้แอตทริบิวต์ พิมพ์.

สำหรับเบราว์เซอร์รุ่นเก่า

จะเกิดอะไรขึ้นหากผู้เยี่ยมชมใช้ IE6 หรือเบราว์เซอร์ยุคก่อนประวัติศาสตร์ที่ไม่สนับสนุนแท็ก ทุกอย่างเป็นเรื่องง่าย: ด้านล่างนี้คือโค้ดที่จะแสดงข้อความสำหรับเบราว์เซอร์ที่ไม่สนับสนุนแท็ก

การบัฟเฟอร์ไฟล์

เมื่อเล่นไฟล์ขนาดใหญ่ อาจใช้การบัฟเฟอร์ไฟล์ สำหรับสิ่งนี้คุณสามารถใช้แอตทริบิวต์ พรีโหลด... สามารถรับได้ 3 ค่า:

• ไม่มี- หากคุณไม่ต้องการใช้บัฟเฟอร์ไฟล์
• รถยนต์- หากคุณต้องการให้เบราว์เซอร์บัฟเฟอร์ไฟล์ทั้งหมด
• ข้อมูลเมตา- เพื่อดาวน์โหลดเฉพาะข้อมูลบริการ (ระยะเวลาของเสียง ฯลฯ )

การควบคุมการเล่น JavaScript

การควบคุมเครื่องเล่นเสียง HTML5 ผ่าน JavaScript ทำได้ง่ายมาก ตัวอย่างต่อไปนี้แสดงวิธีที่คุณสามารถสร้างการควบคุมเครื่องเล่นเสียงพื้นฐานโดยใช้ JavaScript:

นั่นคือทั้งหมดสำหรับวันนี้
หวังว่าบทความนี้จะช่วยให้คุณเข้าใจความสามารถพื้นฐานของแท็ก HTML5 .

คำถามนี้เกิดขึ้นบ่อยมาก ดังนั้นฉันจึงตัดสินใจอุทิศบทความแยกต่างหากในบทเรียน เนื่องจาก HTML ไม่มีเทคโนโลยีสากลสำหรับเล่นเสียงสำหรับเบราว์เซอร์ทั้งหมด เพื่อแก้ปัญหานี้ ฉันเสนอให้ดาวน์โหลดไฟล์เครื่องเล่นเสียง เช่นเดียวกับที่ทำในไซต์ส่วนใหญ่ เราทำทุกอย่างในขั้นตอน:

1. บนโฮสต์ที่ไซต์ของคุณตั้งอยู่ในไดเรกทอรีราก (โฟลเดอร์ที่มีไฟล์ดัชนี) ให้สร้างโฟลเดอร์เสียง ในอนาคต คุณจะวางไฟล์เสียงทั้งหมดไว้ในนั้น

3. ตอนนี้เลือกไฟล์ที่คุณต้องการ ควรใช้ในรูปแบบ mp3 สร้างโฟลเดอร์ เสียงที่รูทของไซต์และอัปโหลด

4. สิ่งที่เหลืออยู่คือการใส่รหัสการเชื่อมต่อเครื่องเล่น เหมาะสำหรับเว็บไซต์ใด ๆ ในตำแหน่งที่ถูกต้องคุณเพียงแค่ต้องระบุเส้นทางไปยังไฟล์เครื่องเล่นและไฟล์เสียงโดยแทนที่คำตามลำดับ your_domainและ audio_file_name:

และคุณทำเสร็จแล้ว! ยังสามารถชมผลงาน ตัวอย่าง.

วิธีตั้งค่าเพลงพื้นหลังใน html

การใช้ความสามารถของ HTML และเบราว์เซอร์ คุณยังสามารถแทรกเพลงประกอบบนหน้าได้อีกด้วย คุณจะต้องใช้ไฟล์เสียงที่มีรูปแบบที่ถูกต้อง: WAV, AU, MIDI หรือ MP3 คุณสามารถใช้ไฟล์ใดก็ได้ที่มีนามสกุลที่ระบุเป็นตัวอย่าง

วิธีแรกคือแท็กฝัง องค์ประกอบการฝังใช้เพื่อโหลดและแสดงวัตถุ (เช่น ไฟล์วิดีโอ ภาพยนตร์แฟลช ไฟล์เสียงบางไฟล์ ฯลฯ) ที่เบราว์เซอร์ไม่เข้าใจโดยกำเนิด

ไวยากรณ์ค่อนข้างง่าย:

ไม่ต้องใช้แท็กปิด

ตอนนี้เรามาดูตัวอย่างของบันทึกที่มีแอตทริบิวต์และด้านล่างด้วยการถอดรหัส:

ฝังแอตทริบิวต์แท็กสำหรับเล่นเสียงใน html
width - ความกว้างของพาเนลเป็นพิกเซล (หรือเปอร์เซ็นต์)
ความสูง - ความสูงของแผงเป็นพิกเซล (หรือเปอร์เซ็นต์)
align - ตำแหน่งของพาเนลที่สัมพันธ์กับข้อความ ค่าที่เป็นไปได้คือ ซ้าย ขวา กึ่งกลาง
ซ่อน - อนุญาตให้คุณซ่อนพาเนล ค่าแอตทริบิวต์: จริง - พาเนลถูกซ่อน เท็จ - มองเห็นพาเนลได้ (ค่าเริ่มต้น)
เริ่มอัตโนมัติ - ค่าจริง - โปรแกรมเล่นเริ่มต้นโดยอัตโนมัติเมื่อโหลดหน้าเท็จ - รอให้กดปุ่มเล่น
loop - loop, true - แทร็กเล่นเป็นวงกลมและถ้าเป็นเท็จ - เพียงครั้งเดียว

วิธีที่สองเก่ามาก แต่ใช้งานได้จริง) เพิ่มทำนองลงในโฟลเดอร์เดียวกัน (ไดเรกทอรี) ที่ไฟล์ของคุณอยู่และเขียนโค้ดต่อไปนี้ในเนื้อหา:

ดังนั้น หลังจากโหลดหน้าแล้ว เมโลดี้ที่คุณระบุในแท็ก bgsound จะดังขึ้น ตอนนี้เรามาดูคุณสมบัติของแท็กกันดีกว่า :

src- เส้นทางไปยังไฟล์เสียงของคุณ
ห่วง- ท่วงทำนองจะทำซ้ำกี่ครั้ง (ถ้า -1 ก็ซ้ำไม่รู้จบ)
สมดุล- ค่าสมดุลสเตอริโอ (จาก -10000 ถึง 10,000)
ปริมาณ- ระดับเสียงของเมโลดี้ที่กำลังเล่น โดยที่ 0 คือค่าสูงสุด และ -10000 คือค่าต่ำสุด

อย่างไรก็ตาม จะไม่สามารถควบคุมเครื่องเล่นได้ไม่ว่าด้วยวิธีใด - ทุกครั้งที่มีการรีเฟรชหน้า แทร็กจะถูกเล่นอีกครั้ง

หลังจากอธิบายวิธีการใส่เพลงประกอบแล้วฉันต้องการห้ามคุณจากสิ่งนี้เนื่องจากผู้ใช้ส่วนใหญ่ในเวลาที่เยี่ยมชมเว็บไซต์ต่าง ๆ มักจะฟังเพลงอยู่แล้ว ดังนั้นเพลงประกอบสามารถบังคับให้เขาปิดแท็บด้วยไซต์เท่านั้น

แทรกเสียงและเพลงใน HTML5 - แท็กเสียง

เสียง- แท็กคู่ที่กำหนดเสียงพื้นหลัง เพลง หรือสตรีมเสียงอื่น ๆ บนไซต์

แอตทริบิวต์แท็กเสียง

เล่นอัตโนมัติ- ไฟล์จะเล่นทันทีเมื่อโหลดหน้า (คล้ายกับเพลงประกอบ bgsound)
การควบคุม- แสดงแผงควบคุมเครื่องเล่นในเบราว์เซอร์
ห่วง- เล่นไฟล์อีกครั้งหลังจากสิ้นสุด
พรีโหลด- การดาวน์โหลดไฟล์เสียงจะเกิดขึ้นพร้อมกับการโหลดหน้า
src- เส้นทางไปยังไฟล์เสียง (mp3 หรือ ogg)

โค้ดตัวอย่างพร้อมแท็กเสียง

เสียงใน HTML 5