HTML Audio

வலைப்பக்கங்களில் ஒலிக் கோப்புகளை இயக்குதல்

HTML Audio

HTML <audio> உறுப்பு ஒரு வலைப்பக்கத்தில் ஒலிக் கோப்பை இயக்க பயன்படுகிறது.

ஒலி உறுப்பு:

HTML இல் ஒலிக் கோப்பை இயக்க, <audio> உறுப்பு கட்டுப்பாடுகளுடன் பயன்படுத்தப்படுகிறது. இது பயனர்களுக்கு இயக்குகை, இடைநிறுத்தம் மற்றும் ஒலியளவு போன்ற கட்டுப்பாடுகளை வழங்குகிறது.

HTML <audio> உறுப்பு

HTML இல் ஒலிக் கோப்பை இயக்க, <audio> உறுப்பைப் பயன்படுத்தவும்:

எடுத்துக்காட்டு

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  உங்கள் உலாவி ஒலி உறுப்பை ஆதரிக்கவில்லை.
</audio>

HTML ஒலி - இது எவ்வாறு செயல்படுகிறது

controls பண்புக்கூறு இயக்குகை, இடைநிறுத்தம் மற்றும் ஒலியளவு போன்ற ஒலி கட்டுப்பாடுகளைச் சேர்க்கிறது.

<source> உறுப்பு உலாவி தேர்ந்தெடுக்கக்கூடிய மாற்று ஒலிக் கோப்புகளைக் குறிப்பிட உங்களை அனுமதிக்கிறது. உலாவி முதல் அங்கீகரிக்கப்பட்ட வடிவத்தைப் பயன்படுத்தும்.

<audio> மற்றும் </audio> குறிச்சொற்களுக்கு இடையே உள்ள உரை <audio> உறுப்பை ஆதரிக்காத உலாவிகளில் மட்டுமே காட்டப்படும்.

HTML <audio> தானியங்கி இயக்கம்

ஒலிக் கோப்பை தானாகத் தொடங்க, autoplay பண்புக்கூறைப் பயன்படுத்தவும்:

எடுத்துக்காட்டு

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  உங்கள் உலாவி ஒலி உறுப்பை ஆதரிக்கவில்லை.
</audio>

குறிப்பு:

குரோமியம் உலாவிகள் பெரும்பாலான நிகழ்வுகளில் தானியங்கி இயக்கத்தை அனுமதிப்பதில்லை. இருப்பினும், முடக்கப்பட்ட தானியங்கி இயக்கம் எப்போதும் அனுமதிக்கப்படுகிறது.

உங்கள் ஒலிக் கோப்பு தானாக இயங்குவதற்கு (ஆனால் முடக்கப்பட்டது) autoplay க்குப் பிறகு muted ஐச் சேர்க்கவும்:

எடுத்துக்காட்டு

<audio controls autoplay muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  உங்கள் உலாவி ஒலி உறுப்பை ஆதரிக்கவில்லை.
</audio>

உலாவி ஆதரவு

அட்டவணையில் உள்ள எண்கள் <audio> உறுப்பை முழுமையாக ஆதரிக்கும் முதல் உலாவி பதிப்பைக் குறிக்கின்றன.

உறுப்பு Chrome Edge Firefox Safari Opera
<audio> 4.0 9.0 3.5 4.0 10.5

HTML ஒலி வடிவங்கள்

மூன்று ஆதரிக்கப்படும் ஒலி வடிவங்கள் உள்ளன: MP3, WAV, மற்றும் OGG. வெவ்வேறு வடிவங்களுக்கான உலாவி ஆதரவு:

உலாவி MP3 WAV OGG
Chrome YES YES YES
Edge YES YES* YES*
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

குறிப்பு:

*Edge 79 முதல்

HTML ஒலி - ஊடக வகைகள்

கோப்பு வடிவம் ஊடக வகை
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav

HTML ஒலி - முறைகள், பண்புகள் மற்றும் நிகழ்வுகள்

HTML DOM <audio> உறுப்புக்கான முறைகள், பண்புகள் மற்றும் நிகழ்வுகளை வரையறுக்கிறது.

இது ஒலிகளை ஏற்ற, இயக்க மற்றும் இடைநிறுத்த, மேலும் கால அளவு மற்றும் ஒலியளவை அமைக்க உங்களை அனுமதிக்கிறது.

ஒரு ஒலி இயங்கத் தொடங்கும்போது, இடைநிறுத்தப்பட்டால் போன்றவற்றை உங்களுக்கு அறிவிக்கக்கூடிய DOM நிகழ்வுகளும் உள்ளன.

JavaScript குறியீடு எடுத்துக்காட்டு:

// ஒலி உறுப்பைப் பெறு
var audio = document.getElementById("demoAudio");

// ஒலியை இயக்கு
function playAudio() {
    audio.play();
}

// ஒலியை இடைநிறுத்து
function pauseAudio() {
    audio.pause();
}

// ஒலியளவை அதிகரிக்கு
function volumeUp() {
    if(audio.volume < 1.0) {
        audio.volume += 0.1;
    }
}

// ஒலியளவைக் குறை
function volumeDown() {
    if(audio.volume > 0.0) {
        audio.volume -= 0.1;
    }
}

// ஒலியை மீண்டும் தொடங்கு
function restartAudio() {
    audio.currentTime = 0;
    audio.play();
}

முழு DOM குறிப்பு:

முழு HTML ஒலி/காணொளி DOM குறிப்பிற்கு jassif team இணையதளத்தைப் பார்வையிடவும்.

HTML ஒலி குறிச்சொற்கள்

குறிச்சொல் விளக்கம்
<audio> ஒலி உள்ளடக்கத்தை வரையறுக்கிறது
<source> <video> மற்றும் <audio> போன்ற ஊடக உறுப்புகளுக்கு பல ஊடக வளங்களை வரையறுக்கிறது

பயிற்சி

பின்வரும் எந்த HTML குறியீடு சரியான ஒலி உறுப்பைக் காட்டுகிறது?

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
</audio>
✓ சரி! இந்த குறியீடு சரியான கட்டுப்பாடுகளுடன் ஒலி உறுப்பைக் காட்டுகிறது
<audio>
  <src="music.mp3">
</audio>
✗ தவறு! <src> என்பது செல்லுபடியாகும் HTML குறிச்சொல் அல்ல. <source> பயன்படுத்த வேண்டும்
<sound controls>
  <source src="music.mp3">
</sound>
✗ தவறு! <sound> என்பது செல்லுபடியாகும் HTML குறிச்சொல் அல்ல. <audio> பயன்படுத்த வேண்டும்