Javascript và audio video hướng dẫn Bạn dùng Javascript để lập trình với audio, video trong trang web. Như start, pause, mute, volume…
Tag audio video trong trang web
Trong trang web, khi muốn nhúng nhạc , nhúng video vào trang thì Bạn sẽ dùng đến các tag audio và video. Xem sơ qua ví dụ sau:
<audio src="TrenSongBachDang.mp3" controls> </audio> <video src="BieuDienNhac.mp4" controls> </video>
Các thuộc tính html của tag audio/video
Để dùng tag audio và video , một số thuộc tính sau cần biết đến để dùng.
| Thuộc tính | Ví dụ | Mô tả |
| controls | controls=’true” | Cho hiện audio trong trang |
| duration | Lấy độ dài thời gian (s) của file audio/video | |
| loop | loop=”true” | Cho lặp lại |
| muted | muted=”true” | Tắt âm thanh |
| paused | paused=”true” | Tạm dừng/ Chạy tiếp |
| volume | volume=”0.8″ | Độ lớn âm thanh (số float từ 0 đế 1) |
| src | src=””uotmi.mp3″ | Địa chỉ file âm thanh |
| currentTime | currentTime=”3″ | Gán hoặc lấy vị trí play audio/video (giây) |
| currentSrc | Lấy URL của file audio/video đang play | |
| ended | Lấy trạng thái của audio xem đã play đến hết chưa. (true là đã play xong) | |
| preload | preload=”true” | Gán/Lấy trạng thái diễn tả audio/video sẽ được nạp ngay khi trang web được nạp |
Các hàm dùng để play, tạm dừng video
| Hàm | Mô tả |
| load() | reload lại audio/video |
| play() | Bằt đầu audio/video |
| pause() | Tạm dừng audio/video |
Các sự kiện của audio/video
| Sự kiện | Mô tả |
| ended | Sự kiện xảy ra khi đã play xong 1 file audio/video |
| error | Sự kiện xảy ra khi có lỗi trong quá trình nạp file audio/video |
| pause | Sự kiện xảy ra khi file audio/video được pause |
Javascript và audio video
Sau đây là ví dụ cách dùng javacript và audio video.
<audio src="NguoiAnhHungCoLau.mp3" id="nhac" controls></audio>
<div id="volume"></div> <hr>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="vol1()">Vol+</button>
<button onclick="vol2()">Vol-</button>
<button onclick="mute()">Mute</button>
<script>
let audio = document.getElementById("nhac");
let vol = document.getElementById("volume");
audio.addEventListener('ended',function(){
vol.innerText="";
});
function play(){
audio.play();
vol.innerText="Số giây: "+ audio.duration;
}
function pause(){ audio.pause()}
function mute(){ audio.muted= !audio.muted}
function vol1(){
if (audio.volume>=1) return;
audio.volume = (audio.volume + 0.1).toFixed(1);
vol.innerText="Volume="+ audio.volume;
}
function vol2(){
if (audio.volume<=0) return;
audio.volume = (audio.volume - 0.1).toFixed(1);
vol.innerText = "Volume=" + audio.volume;
}
</script>
Sau đây là ví dụ tương tự như trên, nhưng là tương tác với video chứ không phải audio.
<h1>The video element</h1>
<video src="ChoDeThuong.mp4" id="video" controls></video>
<div id="volume"></div> <hr>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="vol1()">Vol+</button>
<button onclick="vol2()">Vol-</button>
<button onclick="mute()">Mute</button>
<script>
let video = document.getElementById("video");
let vol = document.getElementById("volume");
video.addEventListener('ended',function(){
vol.innerText="";
});
function play(){
video.play();
vol.innerText="Số giây: "+ video.duration;
}
function pause(){ video.pause()}
function mute(){ video.muted= !video.muted}
function vol1(){
if (video.volume>=1) return;
video.volume = (video.volume + 0.1).toFixed(1);
vol.innerText="Volume="+ video.volume;
}
function vol2(){
if (video.volume<=0) return;
video.volume = (video.volume - 0.1).toFixed(1);
vol.innerText = "Volume=" + video.volume;
}
</script>
Nếu cần tham khảo thêm, bạn hãy xem các link sau nhé : https://www.w3schools.com/tags/ref_av_dom.asp
