การเรียนรู้ HTML ตอนที่ 17: วิธีเพิ่มเสียง (เพลง) ใน HTML

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

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

ในเนื้อหานี้ฉันจะหารือเกี่ยวกับวิธีเพิ่มเพลงใน HTML โดยใช้องค์ประกอบเสียง สำหรับรายละเอียดเพิ่มเติมลองพิจารณาคำอธิบายด้านล่าง:

องค์ประกอบเสียง

องค์ประกอบเสียงเป็นองค์ประกอบเอาต์พุต HTML5 ใหม่ซึ่งใช้สำหรับแทรกเสียงเช่นเพลงลงใน HTML ที่เล่นได้ การใช้องค์ประกอบเสียงจะถูกระบุด้วยแท็กคู่หนึ่งเสียง <audio> .... </ เสียง> ในบรรดาคู่แท็ก <audio> นั้นเป็นองค์ประกอบที่มาและคุณสามารถเพิ่มข้อความที่จะปรากฏขึ้นหากเบราว์เซอร์ไม่รองรับองค์ประกอบเสียง

ในองค์ประกอบเสียงยังมีคุณสมบัติหลายประการ ได้แก่ :

คุณลักษณะ	ความคุ้มค่า	ฟังก์ชัน
เล่นอัตโนมัติ	-	ระบุว่าเสียงจะเล่นทันทีเมื่อหน้าโหลดโดยอัตโนมัติ
การควบคุม	-	บ่งชี้ว่าการควบคุมเสียง (แต่ละเบราว์เซอร์มีการแสดงการควบคุมเสียงที่แตกต่าง - แตกต่างกัน) จะปรากฏขึ้นเหมือนเครื่องเล่นที่มักจะมีคำสั่งเช่นปุ่มเล่น / หยุดชั่วคราว, เลื่อน, ระดับเสียงและอื่น ๆ
ไม่ออกเสียง	-	ใช้เพื่อปิดเสียงหรือปิดเสียงซึ่งหมายความว่าเสียงจะเล่นอย่างเงียบ ๆ ที่จุดเริ่มต้นของอักษรย่อ
ห่วง	-	ใช้เพื่อเล่นเสียงที่เล่นเสร็จแล้ว
src	URL ตำแหน่งไฟล์เสียง	ระบุตำแหน่งที่เก็บของไฟล์เสียงหรือ URL ที่ระบุตำแหน่งของไฟล์เสียง
พรีโหลด	อัตโนมัติ, ไม่มี, เมตาดา	ระบุว่าจะต้องโหลดเสียงสำคัญเมื่อโหลดหน้าเว็บ

คุณสมบัติ src และการควบคุม

นี่คือตัวอย่างรหัสโดยใช้แอตทริบิวต์ scr และการควบคุมใน HTML:

<!DOCTYPE html>
<html>
<head>
<title>Atribut src di elemen audio</title>
</head>
<body>
<audio src="honestly.mp3" controls></audio>
</body>
</html>

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

โครเมียม

Firefox

ในแอตทริบิวต์ src ฉันเพิ่งเขียน honestly.mp3 เพียงเพราะตำแหน่งของไฟล์เสียงเป็นหนึ่งเดียวโฟลเดอร์ที่มีไฟล์ HTML ฉันมีหลายครั้งที่อธิบายเกี่ยวกับการเขียน URL ตำแหน่งไฟล์ในแอตทริบิวต์ src นี้ซึ่งหนึ่งในนั้นคุณสามารถดูในเนื้อหาวิธีการเพิ่มภาพใน HTML

หากคุณใช้แอตทริบิวต์ src เท่านั้นโดยตรงในแท็ก <audio> จะมีเพียงรูปแบบเสียงเดียวที่ใช้ ในขณะเดียวกันจากคำอธิบายก่อนหน้านี้เป็นที่ชัดเจนว่าเบราว์เซอร์ทุกรูปแบบรองรับบางรูปแบบ

เพื่อให้เสียงยังคงสามารถรองรับได้เบราว์เซอร์ที่แตกต่างกันใช้มากกว่าหนึ่งรูปแบบเสียงโดยใช้องค์ประกอบต้นฉบับที่มีการทำเครื่องหมายด้วยการใช้แท็ก <source> คุณลักษณะที่มีอยู่ในองค์ประกอบที่เกี่ยวข้องกับองค์ประกอบเสียงคือ:

คุณลักษณะ	ความคุ้มค่า	ฟังก์ชัน
src	URL ตำแหน่งไฟล์เสียง	ระบุตำแหน่งที่เก็บของไฟล์เสียงหรือ URL ที่ระบุตำแหน่งของไฟล์เสียง
ชนิด	MIME_TYPE	กำหนดประเภท MIME ของเสียง

นี่คือตารางประเภท MIME:

รูปแบบไฟล์	ประเภทสื่อ
mp3	เสียง / mpeg
WAV	เสียง / wav
Ogg	เสียง / ogg

นี่คือตัวอย่างของการเขียนและใช้งานใน HTML:

<!DOCTYPE html>
<html>
<head>
<title>Elemen source di HTML</title>
</head>
<body>
<audio controls>
<source src="honestly.mp3" type="audio/mpeg">
<source src="honestly.ogg" type="audio/ogg">
<source src="honestly.wav" type="audio/wav">
Gagal memutar lagu
</audio>
</body>
</html>

เมื่อเรียกใช้ไฟล์ HTML ผลลัพธ์จะเป็นดังนี้:

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

ก่อนแท็กปิด </audio> ฉันเพิ่มประโยค "ล้มเหลวในการเล่นเพลง" จะปรากฏขึ้นเมื่อเบราว์เซอร์ที่คุณใช้ไม่รองรับองค์ประกอบเสียง ดูเหมือนในเบราว์เซอร์เช่นนี้ (ตัวอย่างเช่นฉันใช้เบราว์เซอร์ Safari 5.7.1):

คุณลักษณะการเล่นอัตโนมัติ

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

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

<!DOCTYPE html>
<html>
<head>
<title>Atribut Autoplay di elemen audio</title>
</head>
<body>
<audio src="honestly.mp3" autoplay controls></audio>
</body>
</html>

แสดงรหัสด้านบนหลังจากทำงานในเบราว์เซอร์:

หากมีการใช้รหัส HTML ด้านบนเสียงจะเล่นโดยอัตโนมัติทันทีหลังจากที่หน้าเว็บโหลดเสร็จ

แอตทริบิวต์ห่วง

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

นี่คือตัวอย่างรหัสที่ใช้ใน HTML:

<!DOCTYPE html>
<html>
<head>
<title>Atribut loop di elemen audio</title>
</head>
<body>
<audio src="honestly.mp3" loop controls></audio>
</body>
</html>

แสดงรหัสด้านบนหลังจากทำงานในเบราว์เซอร์: