HTML <audio>
āĻā§āĻ¯āĻžāĻ: āĻāĻ āĻ¸ā§āĻ°ā§āĻ˛āĻž āĻĒā§āĻ°ā§āĻŽ āĻ āĻāĻŋāĻā§ āĻŽāĻāĻžāĻ° āĻļāĻŋāĻā§āĻˇāĻžāĻ° āĻāĻ˛ā§āĻĒ
āĻ¸āĻŦ āĻļā§āĻ°ā§ āĻšā§ āĻāĻ āĻā§āĻ°ā§, āĻ¯āĻāĻ¨ āĻ¸ā§āĻ°ā§āĻ¯ āĻāĻ˛āĻ¤ā§ āĻāĻ°ā§ āĻāĻžāĻ¨āĻžāĻ˛āĻžāĻ° āĻĒāĻ°ā§āĻĻāĻž āĻ¸āĻ°āĻŋā§ā§ āĻĻāĻŋāĻ˛, āĻāĻ° āĻāĻŽāĻžāĻ° āĻāĻ¨āĻŦāĻā§āĻ¸ā§ āĻĸā§āĻā§ āĻĒā§āĻ˛ āĻā§āĻ˛āĻžā§ā§āĻ¨ā§āĻā§āĻ° āĻāĻāĻāĻŋ āĻāĻŽā§āĻ˛āĨ¤
âāĻāĻŽāĻžāĻĻā§āĻ° āĻā§ā§āĻŦāĻ¸āĻžāĻāĻā§ āĻāĻāĻāĻž āĻ
āĻĄāĻŋāĻ āĻĒā§āĻ˛ā§ā§āĻžāĻ° āĻ˛āĻžāĻāĻžāĻ¨ā§ āĻ¯āĻžā§? āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ°āĻž āĻ¯ā§āĻ¨ āĻāĻŽāĻžāĻĻā§āĻ° āĻŦā§āĻ°ā§āĻ¯āĻžāĻ¨ā§āĻĄā§āĻ° āĻ¸ā§āĻ° āĻļā§āĻ¨āĻ¤ā§ āĻĒāĻžā§āĨ¤â
āĻāĻŽāĻŋ āĻĒā§āĻ°āĻĨāĻŽā§ āĻāĻāĻā§ āĻā§ āĻĒā§āĻ˛āĻžāĻŽ, āĻāĻžāĻ°āĻŖ āĻāĻ āĻ āĻĄāĻŋāĻ āĻĒā§āĻ˛ā§ā§āĻžāĻ° āĻāĻŋāĻ¨āĻŋāĻ¸āĻāĻž āĻāĻā§ āĻāĻāĻ¨āĻ āĻāĻ°āĻŋāĻ¨āĻŋāĨ¤ āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻā§āĻ¯āĻžāĻ˛ā§āĻā§āĻ āĻ¨āĻŋāĻ¤ā§ āĻāĻžāĻ˛ā§āĻŦāĻžāĻ¸āĻŋ, āĻ¤āĻžāĻ āĻāĻ¤ā§āĻŽāĻŦāĻŋāĻļā§āĻŦāĻžāĻ¸ āĻ¨āĻŋā§ā§ āĻŦāĻ˛āĻ˛āĻžāĻŽ, âāĻ āĻŦāĻļā§āĻ¯āĻ! āĻāĻāĻž āĻā§āĻŦ āĻ¸āĻšāĻāĨ¤â (āĻ¯āĻĻāĻŋāĻ āĻā§āĻ¤āĻ°ā§ āĻā§āĻ¤āĻ°ā§ āĻāĻžāĻŦāĻāĻŋāĻ˛āĻžāĻŽ, âāĻā§āĻāĻ˛ āĻāĻžā§āĻž āĻāĻŋāĻā§āĻ āĻ¸āĻšāĻ āĻ¨ā§!â)
āĻĒā§āĻ°āĻĨāĻŽ āĻĻā§āĻāĻž: <audio>
-āĻ° āĻ¸āĻžāĻĨā§ āĻĒāĻ°āĻŋāĻā§
āĻ°āĻžāĻ¤ā§ āĻ¯āĻāĻ¨ āĻ¸āĻŦāĻžāĻ āĻā§āĻŽāĻŋā§ā§, āĻāĻŽāĻŋ āĻ˛ā§āĻ¯āĻžāĻĒāĻāĻĒ āĻā§āĻ˛ā§ <audio>
āĻ˛āĻŋāĻāĻ˛āĻžāĻŽāĨ¤ āĻ¤āĻžāĻ°āĻĒāĻ° āĻāĻŋāĻā§āĻā§āĻˇāĻŖ āĻā§āĻāĻžāĻŦā§ āĻļā§āĻ°ā§ āĻāĻ°āĻŦ, āĻ¸ā§āĻāĻž āĻ¨āĻŋā§ā§ āĻāĻžāĻŦāĻ˛āĻžāĻŽāĨ¤ āĻ
āĻŦāĻļā§āĻˇā§ āĻāĻ¨ā§āĻāĻžāĻ°āĻ¨ā§āĻā§āĻ° āĻ¸āĻžāĻšāĻžāĻ¯ā§āĻ¯ā§ <source>
āĻā§āĻ¯āĻžāĻ āĻā§āĻāĻā§ āĻĒā§āĻ˛āĻžāĻŽāĨ¤ āĻāĻāĻž āĻ¯ā§āĻ¨ āĻ¨āĻžā§āĻ-āĻ¨āĻžā§āĻŋāĻāĻžāĻ° āĻĒā§āĻ°āĻĨāĻŽ āĻĻā§āĻāĻžâāĻāĻŋāĻā§āĻāĻž āĻ¨āĻžāĻ°ā§āĻāĻžāĻ¸, āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻšā§āĻĻā§ā§ āĻāĻ¤ā§āĻ¤ā§āĻāĻ¨āĻžāĨ¤
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
āĻā§āĻĄāĻāĻž āĻ¸ā§āĻ āĻāĻ°ā§ āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ°ā§ āĻ°āĻžāĻ¨ āĻāĻ°āĻžāĻ˛āĻžāĻŽāĨ¤ āĻšā§āĻĄāĻĢā§āĻ¨ āĻĒāĻ°ā§ āĻĒā§āĻ˛ā§ āĻŦāĻžāĻāĻ¨ā§ āĻā§āĻ˛āĻŋāĻ āĻāĻ°āĻ˛āĻžāĻŽ, āĻāĻ° āĻŽāĻ§ā§āĻ° āĻ¸ā§āĻ°ā§ āĻŽāĻ¨ āĻāĻ°ā§ āĻā§āĻ˛āĨ¤ āĻ¸āĻ¤ā§āĻ¯āĻŋ, āĻāĻāĻž āĻ¯ā§āĻ¨ āĻāĻ āĻ¯āĻžāĻĻā§! āĻŽāĻ¨ā§ āĻšāĻ˛ā§, āĻāĻŽāĻŋ āĻāĻ° <audio>
āĻĒā§āĻ°ā§āĻŽā§ āĻĒā§ā§ āĻā§āĻāĻŋāĨ¤
āĻĒā§āĻ°ā§āĻŽ āĻāĻā§āĻ° āĻšāĻ˛ā§: <audio>
-āĻ° āĻā§āĻŖāĻžāĻŦāĻ˛ā§
āĻĒā§āĻ°āĻ¤āĻŋāĻĻāĻŋāĻ¨ āĻāĻāĻā§ āĻāĻāĻā§ āĻāĻ°ā§ <audio>
-āĻ° āĻāĻā§āĻ°āĻ¤āĻžāĻā§ āĻŦā§āĻāĻ¤ā§ āĻļā§āĻ°ā§ āĻāĻ°āĻ˛āĻžāĻŽāĨ¤ āĻāĻ° āĻĒā§āĻ°āĻ¤āĻŋāĻāĻŋ āĻ
ā§āĻ¯āĻžāĻā§āĻ°āĻŋāĻŦāĻŋāĻāĻ āĻ¯ā§āĻ¨ āĻ¨āĻ¤ā§āĻ¨ āĻ¸ā§āĻ° āĻ¨āĻŋā§ā§ āĻāĻ¸ā§āĨ¤
- controls: āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ°āĻž āĻ¨āĻŋāĻā§āĻ°āĻž āĻĒā§āĻ˛ā§, āĻĒāĻ, āĻāĻŋāĻāĻŦāĻž āĻ¸ā§āĻā§āĻ°āĻžāĻŦ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤ āĻāĻŽāĻžāĻ° āĻŽāĻ¨ā§ āĻšāĻ˛ā§, âāĻāĻāĻž āĻ¤ā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻĻāĻžāĻ°ā§āĻŖ āĻ¸ā§āĻŦāĻŋāĻ§āĻž!â
- autoplay: āĻĒā§āĻ āĻ˛ā§āĻĄ āĻšāĻā§āĻžāĻ° āĻ¸āĻžāĻĨā§ āĻ¸āĻžāĻĨā§ āĻ¸ā§āĻ° āĻŦāĻžāĻāĻ¤ā§ āĻļā§āĻ°ā§ āĻāĻ°āĻ˛āĨ¤ āĻĒā§āĻ°āĻĨāĻŽā§ āĻāĻāĻž āĻĻā§āĻā§ āĻā§āĻļāĻŋ āĻšā§ā§āĻāĻŋāĻ˛āĻžāĻŽ, āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻā§āĻ˛ā§ āĻāĻŋā§ā§āĻāĻŋāĻ˛āĻžāĻŽ, āĻ¸āĻŦāĻžāĻ āĻāĻŽāĻžāĻ° āĻŽāĻ¤ā§ āĻ
āĻĄāĻŋāĻ āĻāĻžāĻ˛ā§āĻŦāĻžāĻ¸ā§ āĻ¨āĻžāĨ¤
āĻā§āĻ˛ āĻĨā§āĻā§ āĻļāĻŋāĻā§āĻˇāĻž: āĻ āĻā§āĻĒā§āĻ˛ā§ āĻĻā§āĻā§āĻž āĻŽāĻžāĻ¨ā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻ¸āĻŽā§āĻŽāĻ¤āĻŋ āĻāĻžā§āĻžāĻ āĻ¤āĻžāĻĻā§āĻ° āĻāĻžāĻ¨ā§ āĻšā§āĻ āĻāĻ°ā§ āĻ¸āĻžāĻāĻ¨ā§āĻĄ āĻĸā§āĻāĻŋā§ā§ āĻĻā§āĻā§āĻžāĨ¤ āĻāĻžāĻŦā§āĻ¨ āĻ¤ā§, āĻā§āĻ āĻ āĻĢāĻŋāĻ¸ā§ āĻā§āĻĒāĻāĻžāĻĒ āĻāĻžāĻ āĻāĻ°āĻā§, āĻāĻ° āĻšāĻ āĻžā§ âāĻĸā§āĻŽ āĻĸā§āĻŽ āĻĸā§āĻŽ!â āĻļāĻŦā§āĻĻā§ āĻāĻžāĻ°āĻĒāĻžāĻļ āĻ¤āĻžāĻāĻžāĻ¤ā§ āĻ˛āĻžāĻāĻ˛āĨ¤ - loop: āĻā§āĻ˛āĻžā§ā§āĻ¨ā§āĻ āĻāĻžāĻāĻ˛, āĻ
āĻĄāĻŋāĻ āĻŦāĻžāĻ°āĻŦāĻžāĻ° āĻŦāĻžāĻā§āĻāĨ¤
loop
āĻ ā§āĻ¯āĻžāĻā§āĻ°āĻŋāĻŦāĻŋāĻāĻ āĻ¯ā§āĻ āĻāĻ°āĻ˛āĻžāĻŽāĨ¤ āĻāĻāĻž āĻ¯ā§āĻ¨ āĻāĻŋāĻ°āĻ¨ā§āĻ¤āĻ¨ āĻ¸ā§āĻ°ā§āĻ° āĻāĻā§āĻ°āĨ¤
<audio controls loop muted>
<source src="song.mp3" type="audio/mpeg">
</audio>
āĻĒā§āĻ°āĻĨāĻŽ āĻāĻā§āĻž: āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ° āĻŦāĻŋāĻā§āĻ°āĻžāĻ
āĻ¯ā§āĻā§āĻ¨ā§ āĻāĻžāĻ˛ā§āĻŦāĻžāĻ¸āĻžāĻ° āĻāĻ˛ā§āĻĒā§ āĻāĻŋāĻā§ āĻ¸āĻŽāĻ¸ā§āĻ¯āĻž āĻĨāĻžāĻā§āĻāĨ¤ āĻā§āĻ˛āĻžā§ā§āĻ¨ā§āĻ āĻāĻžāĻ¨āĻžāĻ˛, âāĻ¸āĻŦ āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ°ā§ āĻ āĻĄāĻŋāĻ āĻ āĻŋāĻāĻŽāĻ¤ā§ āĻāĻ˛āĻā§ āĻ¨āĻžāĨ¤â
āĻāĻŽāĻŋ āĻ¤āĻāĻ¨ āĻŦā§āĻāĻ˛āĻžāĻŽ, āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ°āĻā§āĻ˛ā§āĻ āĻŽāĻžāĻ¨ā§āĻˇā§āĻ° āĻŽāĻ¤ā§âāĻ¸āĻŦāĻžāĻ āĻāĻ āĻ°āĻāĻŽ āĻ¨ā§āĨ¤ āĻā§āĻ .mp3 āĻĒāĻāĻ¨ā§āĻĻ āĻāĻ°ā§, āĻā§āĻ .oggāĨ¤ āĻ¤āĻžāĻ <source>
-āĻ āĻāĻāĻžāĻ§āĻŋāĻ āĻĢāĻ°āĻŽā§āĻ¯āĻžāĻ āĻ¯ā§āĻ āĻāĻ°āĻ˛āĻžāĻŽāĨ¤
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
āĻāĻĒāĻ¨āĻžāĻ° āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ° āĻ
āĻĄāĻŋāĻ āĻāĻžāĻ˛āĻžāĻ¤ā§ āĻĒāĻžāĻ°āĻā§ āĻ¨āĻžāĨ¤ <a href="song.mp3">āĻĄāĻžāĻāĻ¨āĻ˛ā§āĻĄ āĻāĻ°ā§āĻ¨</a>āĨ¤
</audio>
āĻāĻāĻž āĻ¯ā§āĻ āĻāĻ°āĻžāĻ° āĻĒāĻ° āĻā§āĻ˛āĻžā§ā§āĻ¨ā§āĻā§āĻ° āĻŽā§āĻā§ āĻšāĻžāĻ¸āĻŋ āĻĻā§āĻā§ āĻŽāĻ¨ā§ āĻšāĻ˛ā§, āĻāĻŽāĻŋ āĻāĻŦāĻžāĻ° āĻāĻŽāĻžāĻ° <audio>
-āĻ° āĻĒā§āĻ°ā§āĻŽā§ āĻĒā§ā§ āĻā§āĻāĻŋāĨ¤
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻ āĻ¨ā§āĻā§āĻ¤āĻŋāĻā§ āĻ¸āĻŽā§āĻŽāĻžāĻ¨ āĻāĻ°āĻž
āĻā§ā§āĻŦ āĻĄā§āĻā§āĻ˛āĻĒāĻžāĻ° āĻšāĻŋāĻ¸ā§āĻŦā§ āĻāĻŽāĻ°āĻž āĻ āĻ¨ā§āĻ āĻāĻŋāĻā§ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋ, āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻ¸āĻŦāĻāĻŋāĻā§ āĻāĻ°āĻž āĻ āĻŋāĻ āĻ¨ā§āĨ¤ āĻāĻāĻžāĻ¨ā§ āĻāĻŋāĻā§ āĻŦāĻŋāĻˇā§ āĻ¯āĻž āĻŽāĻ¨ā§ āĻ°āĻžāĻāĻž āĻāĻ°ā§āĻ°āĻŋ:
- āĻ āĻā§āĻĒā§āĻ˛ā§ āĻā§āĻžāĻ¨: āĻ āĻĄāĻŋāĻ āĻšā§āĻ āĻāĻ°ā§ āĻāĻžāĻ˛ā§ āĻšāĻ˛ā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ°āĻž āĻā§ āĻĒā§āĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤ āĻ āĻĢāĻŋāĻ¸ā§ āĻŦāĻ¸ā§ āĻāĻžāĻ āĻāĻ°āĻžāĻ° āĻ¸āĻŽā§ āĻŦāĻž āĻ°āĻžāĻ¤ā§āĻ° āĻā§āĻŽā§āĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻšā§āĻ āĻāĻ°ā§ āĻ¸āĻžāĻāĻ¨ā§āĻĄ āĻŦāĻžāĻāĻ˛ā§ āĻ¤āĻžāĻ°āĻž āĻā§ā§āĻŦāĻ¸āĻžāĻāĻāĻāĻžāĻ āĻŦāĻ¨ā§āĻ§ āĻāĻ°ā§ āĻĻāĻŋāĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤
- āĻŽāĻŋāĻāĻ āĻ°āĻžāĻāĻž: āĻ¯āĻĻāĻŋ āĻ āĻā§āĻĒā§āĻ˛ā§ āĻĻāĻŋāĻ¤ā§āĻ āĻšā§, āĻ āĻĄāĻŋāĻāĻā§ āĻļā§āĻ°ā§āĻ¤ā§ āĻŽāĻŋāĻāĻ āĻāĻ°ā§ āĻĻāĻŋāĻ¨āĨ¤ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ°āĻž āĻāĻā§āĻāĻž āĻāĻ°āĻ˛ā§ āĻ¨āĻŋāĻā§āĻ°āĻž āĻ¸āĻžāĻāĻ¨ā§āĻĄ āĻāĻžāĻ˛ā§ āĻāĻ°āĻŦā§āĨ¤
- āĻāĻ¨ā§āĻā§āĻ°ā§āĻ˛āĻ¸ āĻĨāĻžāĻāĻž: āĻĒā§āĻ˛ā§-āĻĒāĻā§āĻ° āĻā§āĻˇāĻŽāĻ¤āĻž āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻšāĻžāĻ¤ā§ āĻĨāĻžāĻāĻž āĻāĻāĻŋāĻ¤āĨ¤ āĻāĻāĻŋ āĻ¨āĻž āĻĻāĻŋāĻ˛ā§ āĻāĻĒāĻ¨āĻžāĻ° āĻ¸āĻžāĻāĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻāĻžāĻā§ āĻŦāĻŋāĻ°āĻā§āĻ¤āĻŋāĻāĻ° āĻŽāĻ¨ā§ āĻšāĻŦā§āĨ¤
- āĻ ā§āĻ¯āĻžāĻā§āĻ¸ā§āĻ¸āĻŋāĻŦāĻŋāĻ˛āĻŋāĻāĻŋ: āĻ āĻĄāĻŋāĻ āĻĒā§āĻ˛ā§ā§āĻžāĻ°ā§āĻ° āĻ¸āĻžāĻĨā§ āĻŦāĻŋāĻāĻ˛ā§āĻĒ āĻā§āĻā§āĻ¸āĻ āĻĻāĻŋāĻ¨ āĻŦāĻž āĻĄāĻžāĻāĻ¨āĻ˛ā§āĻĄ āĻ˛āĻŋāĻā§āĻ āĻ¯ā§āĻā§āĻ¤ āĻāĻ°ā§āĻ¨āĨ¤ āĻ¸āĻŦāĻžāĻ āĻ¤ā§ āĻāĻāĻ āĻĄāĻŋāĻāĻžāĻāĻ¸ā§ āĻŦāĻž āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ°ā§ āĻāĻĒāĻ¨āĻžāĻ° āĻ¸āĻžāĻāĻ āĻĻā§āĻāĻā§ āĻ¨āĻžāĨ¤
āĻ¸ā§āĻāĻžāĻāĻ˛āĻŋāĻ: āĻ¸ā§āĻ¨ā§āĻĻāĻ°ā§āĻ¯ā§āĻ° āĻŽā§āĻ˛āĻŦāĻ¨ā§āĻ§āĻ¨
āĻā§āĻ˛āĻžā§ā§āĻ¨ā§āĻ āĻŦāĻ˛āĻ˛, âāĻ āĻĄāĻŋāĻ āĻĒā§āĻ˛ā§ā§āĻžāĻ°āĻāĻŋ āĻ¯ā§āĻ¨ āĻāĻāĻā§ āĻ¸ā§āĻ¨ā§āĻĻāĻ° āĻĻā§āĻāĻžā§āĨ¤â CSS āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§ āĻĒā§āĻ˛ā§ā§āĻžāĻ°ā§ āĻāĻŋāĻā§ āĻ¸ā§āĻāĻžāĻāĻ˛ āĻ¯ā§āĻ āĻāĻ°āĻ˛āĻžāĻŽāĨ¤
<audio class="styled-audio" controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<style>
.styled-audio {
width: 80%;
max-width: 600px;
border: 3px solid #FF5722;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
āĻāĻ āĻĄāĻŋāĻāĻžāĻāĻ¨ āĻĻā§āĻā§ āĻā§āĻ˛āĻžā§ā§āĻ¨ā§āĻ āĻŦāĻ˛āĻ˛, âāĻāĻĒāĻ¨āĻŋ āĻļā§āĻ§ā§ āĻĒā§āĻ˛ā§ā§āĻžāĻ° āĻŦāĻžāĻ¨āĻžāĻ¨āĻ¨āĻŋ; āĻāĻĒāĻ¨āĻŋ āĻāĻŽāĻžāĻĻā§āĻ° āĻā§ā§āĻŦāĻ¸āĻžāĻāĻāĻā§ āĻāĻ°āĻ āĻĒā§āĻ°āĻžāĻŖāĻŦāĻ¨ā§āĻ¤ āĻāĻ°ā§ āĻ¤ā§āĻ˛ā§āĻā§āĻ¨!â
HTML <audio>
āĻā§āĻ¯āĻžāĻ: āĻ¸ā§āĻ°ā§āĻ˛āĻž āĻĒā§āĻ°ā§āĻŽā§āĻ° āĻāĻ˛ā§āĻĒ (UX āĻā§āĻāĻ¸ā§āĻ āĻ¸āĻš)
āĻ¸āĻŦāĻāĻŋāĻā§ āĻļā§āĻ°ā§ āĻšā§ āĻāĻ āĻŽāĻŋāĻˇā§āĻāĻŋ āĻ¸āĻāĻžāĻ˛ā§āĨ¤ āĻā§āĻ˛āĻžā§ā§āĻ¨ā§āĻā§āĻ° āĻāĻŽā§āĻ˛ā§ āĻāĻŋāĻ˛ āĻāĻāĻāĻŋ āĻā§āĻ¯āĻžāĻ˛ā§āĻā§āĻââāĻāĻŽāĻžāĻĻā§āĻ° āĻā§ā§āĻŦāĻ¸āĻžāĻāĻā§ āĻāĻāĻāĻŋ āĻ
āĻĄāĻŋāĻ āĻĒā§āĻ˛ā§ā§āĻžāĻ° āĻ˛āĻžāĻāĻŦā§, āĻ¯āĻžāĻ¤ā§ āĻāĻŋāĻāĻŋāĻāĻ°āĻ°āĻž āĻ¸āĻā§āĻā§āĻ¤ āĻāĻĒāĻā§āĻ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤â
āĻāĻŽāĻŋ āĻāĻ āĻāĻžāĻ āĻ¨āĻŋā§ā§ āĻā§āĻŦ āĻāĻā§āĻā§āĻŦāĻ¸āĻŋāĻ¤ āĻšāĻ˛ā§āĻ āĻŦā§āĻāĻ¤ā§ āĻĒāĻžāĻ°āĻāĻŋāĻ˛āĻžāĻŽ, āĻāĻāĻžāĻ¨ā§ āĻā§āĻŦāĻ˛ āĻā§āĻĄāĻŋāĻ āĻ¨ā§, āĻāĻāĻāĻžāĻ°āĻĻā§āĻ° āĻ
āĻāĻŋāĻā§āĻāĻ¤āĻžāĻ (UX) āĻā§āĻ°ā§āĻ¤ā§āĻŦā§āĻ° āĻ¸āĻžāĻĨā§ āĻŦāĻŋāĻŦā§āĻāĻ¨āĻž āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻžāĻ°āĻŖ, āĻāĻāĻāĻŋ āĻā§āĻ āĻā§āĻ˛āĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻĻā§āĻ° āĻŦāĻŋāĻ°āĻā§āĻ¤ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤
āĻāĻŋāĻĒāĻ¸: <audio>
āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°ā§āĻ° āĻ¸āĻŽā§ āĻ¯āĻž āĻā§ā§āĻžāĻ˛ āĻ°āĻžāĻāĻ¤ā§ āĻšāĻŦā§
ā§§. Autoplay āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻĨā§āĻā§ āĻŦāĻŋāĻ°āĻ¤ āĻĨāĻžāĻā§āĻ¨
āĻ
āĻ¨ā§āĻ āĻ¸āĻŽā§ āĻ
āĻĄāĻŋāĻ āĻĒā§āĻ āĻ˛ā§āĻĄ āĻšāĻā§āĻžāĻ° āĻ¸āĻžāĻĨā§ āĻ¸āĻžāĻĨā§āĻ āĻāĻžāĻ˛ā§ āĻšā§ā§ āĻ¯āĻžā§ (āĻ¯ā§āĻŽāĻ¨: autoplay
āĻ
ā§āĻ¯āĻžāĻā§āĻ°āĻŋāĻŦāĻŋāĻāĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ˛ā§)āĨ¤ āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻāĻāĻŋ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻĻā§āĻ° āĻāĻ¨ā§āĻ¯ āĻā§āĻŦāĻ āĻ
āĻ¸ā§āĻŦāĻ¸ā§āĻ¤āĻŋāĻāĻ° āĻšāĻ¤ā§ āĻĒāĻžāĻ°ā§, āĻŦāĻŋāĻļā§āĻˇāĻ¤ āĻ¯āĻĻāĻŋ āĻ¤āĻžāĻ°āĻž āĻ
āĻĢāĻŋāĻ¸ā§ āĻŦāĻž āĻ˛āĻžāĻāĻŦā§āĻ°ā§āĻ°āĻŋāĻ¤ā§ āĻĨāĻžāĻā§āĻ¨āĨ¤
āĻāĻĻāĻžāĻšāĻ°āĻŖ:
<audio autoplay>
<source src="song.mp3" type="audio/mpeg">
</audio>
āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨:
āĻĒā§āĻ āĻ˛ā§āĻĄā§āĻ° āĻ¸āĻŽā§ āĻ
āĻĄāĻŋāĻ āĻāĻžāĻ˛ā§ āĻ¨āĻž āĻāĻ°ā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻĻā§āĻ° āĻšāĻžāĻ¤ā§ āĻ¨āĻŋā§āĻ¨ā§āĻ¤ā§āĻ°āĻŖ āĻĻāĻŋāĻ¨āĨ¤
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
ā§¨. Muted + Autoplay: āĻāĻ¨ā§āĻĄāĻŋāĻļāĻ¨āĻžāĻ˛ āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨
āĻ¯āĻĻāĻŋ āĻā§āĻ˛āĻžā§ā§āĻ¨ā§āĻā§āĻ° āĻ¨āĻŋāĻ°ā§āĻĻā§āĻļāĻ¨āĻžā§ autoplay āĻĒā§āĻ°ā§ā§āĻāĻ¨ āĻšā§, āĻ¤āĻžāĻšāĻ˛ā§ āĻ¨āĻŋāĻļā§āĻāĻŋāĻ¤ āĻāĻ°ā§āĻ¨, āĻ āĻĄāĻŋāĻ āĻĄāĻŋāĻĢāĻ˛ā§āĻāĻāĻžāĻŦā§ āĻŽāĻŋāĻāĻ (mute) āĻāĻ°āĻž āĻĨāĻžāĻā§āĨ¤ āĻāĻāĻŋ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻĻā§āĻ° āĻ āĻĒā§āĻ°āĻ¸ā§āĻ¤ā§āĻ¤ āĻ āĻŦāĻ¸ā§āĻĨāĻžā§ āĻĢā§āĻ˛ā§ āĻĻā§āĻŦā§ āĻ¨āĻžāĨ¤
<audio autoplay muted controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
ā§Š. āĻāĻ¨ā§āĻā§āĻ°ā§āĻ˛āĻ¸ āĻ¯ā§āĻ āĻāĻ°ā§āĻ¨ (āĻ āĻŦāĻļā§āĻ¯āĻ)
āĻāĻāĻāĻžāĻ°āĻĻā§āĻ° āĻšāĻžāĻ¤ā§ āĻ¨āĻŋā§āĻ¨ā§āĻ¤ā§āĻ°āĻŖ āĻĻāĻŋāĻ¤ā§ āĻā§āĻ˛āĻŦā§āĻ¨ āĻ¨āĻžāĨ¤ āĻāĻ¨ā§āĻā§āĻ°ā§āĻ˛āĻ¸ āĻāĻžā§āĻž āĻ āĻĄāĻŋāĻ āĻĒā§āĻ˛ā§ā§āĻžāĻ° āĻāĻāĻāĻŋ āĻ¸ā§āĻā§āĻ¯āĻžāĻāĻŋāĻ āĻā§āĻ¯āĻžāĻ āĻšā§ā§ āĻ¯āĻžā§, āĻ¯āĻž āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻā§āĻ¨ā§ āĻāĻĒāĻ¯ā§āĻā§ āĻ āĻāĻŋāĻā§āĻāĻ¤āĻž āĻ¨āĻŋā§ā§ āĻāĻ¸ā§ āĻ¨āĻžāĨ¤
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
ā§Ē. Fallback āĻāĻ¨ā§āĻā§āĻ¨ā§āĻ āĻĻāĻŋāĻ¨
āĻ¸āĻŦ āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ° āĻ¸āĻŦ āĻĢāĻ°āĻŽā§āĻ¯āĻžāĻ āĻ¸āĻžāĻĒā§āĻ°ā§āĻ āĻāĻ°ā§ āĻ¨āĻžāĨ¤ āĻ¤āĻžāĻ āĻ¨āĻŋāĻļā§āĻāĻŋāĻ¤ āĻāĻ°ā§āĻ¨, āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ° āĻ¯āĻĻāĻŋ āĻ āĻĄāĻŋāĻ āĻāĻžāĻ˛āĻžāĻ¤ā§ āĻŦā§āĻ¯āĻ°ā§āĻĨ āĻšā§, āĻ¤āĻāĻ¨ āĻāĻāĻāĻŋ āĻŦāĻŋāĻāĻ˛ā§āĻĒ āĻŦāĻžāĻ°ā§āĻ¤āĻž āĻĻā§āĻāĻžā§āĨ¤
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
āĻāĻĒāĻ¨āĻžāĻ° āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ° āĻāĻ āĻ
āĻĄāĻŋāĻ āĻ¸āĻžāĻĒā§āĻ°ā§āĻ āĻāĻ°ā§ āĻ¨āĻžāĨ¤ <a href="song.mp3">āĻ
āĻĄāĻŋāĻ āĻĄāĻžāĻāĻ¨āĻ˛ā§āĻĄ āĻāĻ°ā§āĻ¨āĨ¤</a>
</audio>
ā§Ģ. āĻ˛ā§āĻĒ āĻ āĻĒāĻļāĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°ā§ āĻ¸āĻ¤āĻ°ā§āĻ āĻĨāĻžāĻā§āĻ¨
āĻ¯āĻĻāĻŋ āĻ˛ā§āĻĒ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨, āĻ¤āĻŦā§ āĻ¨āĻŋāĻļā§āĻāĻŋāĻ¤ āĻāĻ°ā§āĻ¨ āĻāĻāĻŋ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻ
āĻāĻŋāĻā§āĻāĻ¤āĻžā§ āĻ¨ā§āĻ¤āĻŋāĻŦāĻžāĻāĻ āĻĒā§āĻ°āĻāĻžāĻŦ āĻĢā§āĻ˛āĻā§ āĻ¨āĻžāĨ¤ āĻā§āĻ¨ā§ āĻ
āĻĄāĻŋāĻ āĻŦāĻžāĻ°āĻŦāĻžāĻ° āĻāĻžāĻ˛āĻžāĻ˛ā§ āĻāĻāĻŋ āĻŦāĻŋāĻ°āĻā§āĻ¤āĻŋāĻ° āĻāĻžāĻ°āĻŖ āĻšāĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤
āĻā§āĻ˛:
<audio controls loop>
<source src="song.mp3" type="audio/mpeg">
</audio>
āĻ¸āĻ āĻŋāĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°:
āĻ˛ā§āĻĒāĻŋāĻ āĻ¤āĻāĻ¨āĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨, āĻ¯āĻāĻ¨ āĻāĻāĻŋ āĻ¸ā§āĻĒāĻˇā§āĻāĻāĻžāĻŦā§ āĻĒā§āĻ°ā§ā§āĻāĻ¨ā§ā§ āĻāĻŦāĻ āĻā§āĻ˛āĻžā§ā§āĻ¨ā§āĻā§āĻ° āĻāĻžāĻšāĻŋāĻĻāĻžāĻ° āĻ¸āĻžāĻĨā§ āĻŽāĻžāĻ¨āĻžāĻ¨āĻ¸āĻāĨ¤ āĻāĻāĻžā§āĻž, āĻāĻāĻāĻŋ āĻ
āĻĒāĻļāĻ¨ āĻĻāĻŋāĻ¨ āĻ¯āĻžāĻ¤ā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ°āĻž āĻ˛ā§āĻĒ āĻŦāĻ¨ā§āĻ§ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤
ā§Ŧ. āĻāĻ˛āĻŋāĻāĻŽā§āĻ° āĻĄāĻŋāĻĢāĻ˛ā§āĻ āĻ˛ā§āĻā§āĻ˛ āĻ¨āĻŋā§āĻ¨ā§āĻ¤ā§āĻ°āĻŖ āĻāĻ°ā§āĻ¨
āĻ āĻĄāĻŋāĻāĻ° āĻĄāĻŋāĻĢāĻ˛ā§āĻ āĻāĻ˛āĻŋāĻāĻŽ āĻā§āĻŦ āĻŦā§āĻļāĻŋ āĻ°āĻžāĻāĻž āĻāĻāĻŋāĻ¤ āĻ¨ā§āĨ¤ āĻāĻāĻāĻŋ āĻŽāĻ§ā§āĻ¯āĻŽ āĻ¸ā§āĻ¤āĻ°ā§ āĻļā§āĻ°ā§ āĻāĻ°āĻž āĻ¸āĻŦāĻā§ā§ā§ āĻāĻžāĻ˛ā§āĨ¤
HTML āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨ āĻ¨ā§āĻ, āĻ¤āĻŦā§ āĻāĻžāĻāĻžāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻĻāĻŋā§ā§ āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨:
const audio = document.querySelector('audio');
audio.volume = 0.5; // āĻāĻ˛āĻŋāĻāĻŽ ā§Ģā§Ļ% āĻ āĻļā§āĻ°ā§ āĻšāĻŦā§āĨ¤
ā§. āĻ¸ā§āĻāĻžāĻāĻ˛āĻŋāĻ āĻ āĻ°ā§āĻ¸āĻĒāĻ¨ā§āĻ¸āĻŋāĻ āĻĄāĻŋāĻāĻžāĻāĻ¨
āĻ āĻĄāĻŋāĻ āĻĒā§āĻ˛ā§ā§āĻžāĻ°ā§āĻ° āĻĄāĻŋāĻāĻžāĻāĻ¨ āĻ¸ā§āĻ¨ā§āĻĻāĻ° āĻāĻŦāĻ āĻ°ā§āĻ¸āĻĒāĻ¨ā§āĻ¸āĻŋāĻ āĻšāĻā§āĻž āĻāĻāĻŋāĻ¤āĨ¤ āĻāĻāĻŋ āĻŽā§āĻŦāĻžāĻāĻ˛ āĻ āĻĄā§āĻ¸ā§āĻāĻāĻĒ āĻāĻā§ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻāĻĒāĻ¯ā§āĻā§āĻ¤āĻāĻžāĻŦā§ āĻāĻžāĻ āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤
<audio class="responsive-audio" controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<style>
.responsive-audio {
width: 100%;
max-width: 500px;
margin: 0 auto;
display: block;
}
</style>
ā§Ž. āĻ ā§āĻ¯āĻžāĻā§āĻ¸ā§āĻ¸āĻŋāĻŦāĻŋāĻ˛āĻŋāĻāĻŋ āĻ¨āĻŋāĻļā§āĻāĻŋāĻ¤ āĻāĻ°ā§āĻ¨
āĻ¸āĻŦāĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻā§ā§āĻŦāĻ¸āĻžāĻāĻāĻā§ āĻ¸āĻšāĻāĻ˛āĻā§āĻ¯ āĻāĻ°āĻ¤ā§ āĻ ā§āĻ¯āĻžāĻā§āĻ¸ā§āĻ¸āĻŋāĻŦāĻŋāĻ˛āĻŋāĻāĻŋ āĻŽā§āĻ¨ā§ āĻāĻ˛ā§āĻ¨āĨ¤
- āĻāĻŋāĻā§āĻ¯ā§ā§āĻžāĻ˛ āĻāĻ¨ā§āĻā§āĻ°ā§āĻ˛āĻ¸ āĻ¸ā§āĻĒāĻˇā§āĻ āĻ°āĻžāĻā§āĻ¨āĨ¤
- āĻ¯āĻĻāĻŋ āĻ¸āĻŽā§āĻāĻŦ āĻšā§, āĻ āĻĄāĻŋāĻāĻ° āĻāĻāĻāĻŋ āĻ˛āĻŋāĻāĻŋāĻ¤ āĻŦāĻŋāĻŦāĻ°āĻŖ āĻŦāĻž āĻ˛āĻŋāĻ°āĻŋāĻā§āĻ¸ āĻ¯ā§āĻ āĻāĻ°ā§āĻ¨āĨ¤
<p>āĻāĻ āĻ
āĻĄāĻŋāĻ āĻĢāĻžāĻāĻ˛āĻāĻŋ: āĻāĻāĻāĻŋ āĻŽāĻāĻžāĻ° āĻŽāĻŋāĻāĻāĻŋāĻ āĻā§āĻ°ā§āĻ¯āĻžāĻāĨ¤</p>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
āĻ¸āĻāĻā§āĻˇā§āĻĒā§
āĻāĻāĻāĻŋ <audio>
āĻā§āĻ¯āĻžāĻ āĻļā§āĻ§ā§āĻŽāĻžāĻ¤ā§āĻ° āĻāĻāĻāĻŋ āĻā§āĻĄ āĻ¨ā§; āĻāĻāĻŋ āĻāĻāĻāĻŋ āĻ
āĻāĻŋāĻā§āĻāĻ¤āĻž āĻ¤ā§āĻ°āĻŋ āĻāĻ°ā§āĨ¤ āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻā§āĻ˛āĻāĻžāĻŦā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ˛ā§ āĻāĻāĻŋ āĻŦāĻŋāĻ°āĻā§āĻ¤āĻŋāĻ° āĻāĻžāĻ°āĻŖ āĻšāĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤ āĻ¤āĻžāĻ āĻāĻ āĻā§āĻ¯āĻžāĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°ā§āĻ° āĻ¸āĻŽā§ āĻ¸āĻŦāĻ¸āĻŽā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻāĻžāĻ°ā§āĻ° āĻĒā§āĻ°ā§ā§āĻāĻ¨ āĻāĻŦāĻ āĻ
āĻāĻŋāĻā§āĻāĻ¤āĻž āĻŽāĻžāĻĨāĻžā§ āĻ°āĻžāĻā§āĻ¨āĨ¤ āĻŽāĻ¨ā§ āĻ°āĻžāĻāĻŦā§āĻ¨, āĻāĻāĻāĻŋ āĻā§āĻā§āĻ āĻ¸ā§āĻ¨ā§āĻĻāĻ° āĻ
āĻāĻŋāĻā§āĻāĻ¤āĻžāĻ āĻāĻŋāĻāĻŋāĻāĻ°āĻĻā§āĻ° āĻŽāĻ¨ āĻā§ āĻāĻ°ā§ āĻ¨āĻŋāĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤