AUDIO LINK
1)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
2)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
3)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the button to add a new text track.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The addTextTrack method is not supported in any major browsers.</p>
<script>
var x = document.getElementById("myAudio");
function myFunction() {
var y = x.addTextTrack("caption");
y.addCue(new TextTrackCue("Test text", 01.000, 04.000,"","","",true));
}
</script>
</body>
</html>
4)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<track src="demo_sub.vtt">
Your browser does not support the audio element.
</audio>
<p>Click the button to get the number of available text tracks.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAudio").textTracks.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
5)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls src="horse.ogg">
</audio>
<p>Click the button to get the URL of the audio.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let x = document.getElementById("myAudio").src;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
6)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls onseeking="myFunction()" onseeked="myFunction()">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Try seeking in the audio: <span id="mySpan"></span></p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAudio");
document.getElementById("mySpan").innerHTML=("Seeking: " + x.seeking);
}
</script>
</body>
</html>
7)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls onseeking="myFunction()" onseeked="myFunction()">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Try seeking in the audio: <span id="mySpan"></span></p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAudio");
document.getElementById("mySpan").innerHTML=("Seeking: " + x.seeking);
}
</script>
</body>
</html>
8)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the button to get the current ready state of the audio.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAudio").readyState;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
9)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls preload="none">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the button to return the value of the preload attribute of the audio.</p>
<button onclick="myFunction()">Try it</button>
<p><b>Note:</b> The preload attribute is not supported in IE.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAudio").preload;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
10)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the button to get the first played range (part) of the audio in seconds.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAudio");
document.getElementById("demo").innerHTML = "Start: " + x.played.start(0) + " End: " + x.played.end(0);
}
</script>
</body>
</html>
11)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br>
<button onclick="getPlaySpeed()" type="button">What is playback speed?</button>
<button onclick="setPlaySpeed()" type="button">Set audio to be play in slow motion</button>
<script>
var x = document.getElementById("myAudio");
function getPlaySpeed() {
alert(x.playbackRate);
}
function setPlaySpeed() {
x.playbackRate = 0.5;
}
</script>
</body>
</html>
12)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the button to find out if the audio is paused.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAudio").paused;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
13)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the button to get the network state of the audio.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAudio").networkState;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
14)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br>
<button onclick="enableMute()" type="button">Mute sound</button>
<button onclick="disableMute()" type="button">Enable sound</button>
<button onclick="checkMute()" type="button">Check muted status</button>
<script>
var x = document.getElementById("myAudio");
function enableMute() {
x.muted = true;
}
function disableMute() {
x.muted = false;
}
function checkMute() {
alert(x.muted);
}
</script>
</body>
</html>
15)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio1" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="myAudio2" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br>
<button onclick="setMedGroup()" type="button">Set media group for audios</button>
<button onclick="getMedGroup()" type="button">Get media group for audios</button>
<script>
var x = document.getElementById("myAudio1");
var y = document.getElementById("myAudio2");
function setMedGroup() {
x.mediaGroup = "test";
y.mediaGroup = "test";
}
function getMedGroup() {
alert("Audio 1 media group: " + x.mediaGroup +
". Audio 2 media group: " + y.mediaGroup);
}
</script>
</body>
</html>
16)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br>
<button onclick="enableLoop()" type="button">Enable loop</button>
<button onclick="disableLoop()" type="button">Disable loop</button>
<button onclick="checkLoop()" type="button">Check loop status</button>
<script>
var x = document.getElementById("myAudio");
function enableLoop() {
x.loop = true;
x.load();
}
function disableLoop() {
x.loop = false;
x.load();
}
function checkLoop() {
alert(x.loop);
}
</script>
</body>
</html>
17) AUTO PLAY
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the button to find out if the audio automatically started to play as soon as it was ready.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
18) AUDIO CONTROLS
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br>
<button onclick="enableControls()" type="button">Enable controls</button>
<button onclick="disableControls()" type="button">Disable controls</button>
<button onclick="checkControls()" type="button">Check controls status</button>
<script>
var x = document.getElementById("myAudio");
function enableControls() {
x.controls = true;
x.load();
}
function disableControls() {
x.controls = false;
x.load();
}
function checkControls() {
alert(x.controls);
}
</script>
</body>
</html>
19) MUTED
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br>
<button onclick="getMuted()" type="button">Is the audio muted by default?</button>
<button onclick="setToMuted()" type="button">Set audio to be muted by default, and reload video</button>
<script>
var x = document.getElementById("myAudio");
function getMuted() {
alert(x.defaultMuted);
}
function setToMuted() {
x.defaultMuted = true;
x.load()
}
</script>
</body>
</html>
About malay pramanik
कोई टिप्पणी नहीं