Audio Sprite là sự tổng hợp nhiều âm thanh trong 1 file âm thanh duy nhất. Trong phần mềm cần sử dụng đoạn âm thanh nào, sẽ cho phép phát đoạn âm thanh đó, đến hết đoạn thì thư viện âm thanh sẽ ngắt.
Tư duy này tương đồng với Image Sprite. Sử dụng Audio Sprite giúp giảm bớt số lượng request đến Server, giúp tăng khả năng tổ chức lưu trữ âm thanh cho phần mềm.
Audio Sprite
Audio Sprite là gì?
Giả sử ta có 1 file âm thanh, thay vì phát âm thanh từ đầu cho đến cuối thì phát âm thanh tại 1 thời điểm xác định A đến 1 thời điểm xác định B trong file âm thanh đó (để dễ hình dung, nó giống như việc phát 1 sound-track trong 1 đĩa CD thay vì phải phát nhạc từ đầu đĩa cho đến cuối đĩa).
Audio Sprite có ích lợi gì?
Nếu các file âm thanh ngắn và nhỏ, sử dụng Audio Sprite có 1 số lợi ích nhất định.
- Giảm thiểu lượng http-request lên server quá nhiều (môi trường web).
- Quản lý nhiều file nhỏ tốn nhiều chi phí và không có vẻ "hướng đối tượng" tốt (nếu các nhóm âm thanh có mục đích liên quan đến âm thanh button, có thể nối nhiều file âm thanh button vào 1 file duy nhất, lúc phát các âm thanh cần thiết liên quan button chỉ cần nạp file âm thanh này).
- Trong 1 chừng mực nhất định, các file âm thanh nhỏ sẽ gây ra hao phí trong lưu trữ 1 ít cho mỗi file, tích hợp lại sẽ giảm được 1 ít về việc hao phí này (tìm hiểu thêm về khái niệm padding).
Codes thử nghiệm
Cơ bản nạp và phát âm thanh với JavaScript
Phát toàn bộ âm thanh
<!doctype html>
<html>
<head>
<title>STDIO Audio Sprite demo</title>
<script>
function loadAudio()
{
var audioObj = document.createElement('audio');
audioObj.setAttribute('id', 'id-audio');
var sourceObj = document.createElement('source');
sourceObj.setAttribute('type', 'audio/ogg');
sourceObj.setAttribute('src', 'sfx_theme_menu_intro.ogg');
audioObj.appendChild(sourceObj);
document.getElementById('id-stdio').appendChild(audioObj);
document.getElementById('id-audio').load();
}
function playAudio_1()
{
var audioObj = document.getElementById('id-audio');
audioObj.play();
}
</script>
</head>
<body id="id-stdio" onload="loadAudio()">
<button onclick="playAudio_1()">Play From Start To End</button>
</body>
</html>Lưu ý, dòng thứ 21 playAudio_1() phát âm thanh từ đầu cho đến khi kết thúc file âm thanh.
Phát 1 phần file âm thanh trong khoảng cho trước
Viết thêm hàm playAudio_2(start, length) dùng để phát 1 đoạn âm thanh dựa vào 2 thành phần của đối tượng Audio đó là currentTime và sự kiện timeupdate
currentTime: dùng để lấy và gán (get/set) lại thời gian hiện tại cần phát trong file âm thanh.timeupdate: là sự kiện được gọi liên tục khi âm thanh đang phát. Sự kiện này sẽ liên tục kiểm tra thời gian âm thanh đã phát được bao nhiêu, nếu chạm ngưỡng thời gian đã định thì tiến hành ngừng phát âm thanh (gọipause).
Code hoàn chỉnh với hàm phát 1 phần của âm thanh như sau
function playAudio_2(start, length)
{
let audioObj = document.getElementById('id-audio');
audioObj.currentTime = start;
audioObj.addEventListener('timeupdate', function() {
if (this.currentTime > start + length) {
this.pause();
}
});
audioObj.play();
}Kết quả mẫu
Download codes mẫu
Quá trình tạo và sử dụng Audio Sprite
Môi trường hiện thực
- Các trình duyệt web phổ biến hiện tại có hỗ trợ HTML5+.
- 1 file âm thanh, có thể lấy từ STDIOAudioSpriteDemo.zip.
- Định dạng file âm thanh là ogg.
Nhóm các file âm thanh mong muốn lại thành 1 file
Lúc đầu các file âm thanh đều độc lập nhau, cần tổng hợp các file vào chung 1 file.
Giả sử có 7 file âm thanh độc lập như hình dưới
Download 7 file âm thanh độc lập tại đây.
Sử dụng 1 phần mềm đơn giản để nối các file âm thanh này thành 1 file duy nhất - STDIO7SinsSFXUnique.ogg
Download file âm thanh sau khi được nhóm lại thành 1 file duy nhất tại đây, phần mềm sử dụng là Audacity.
Trong file âm thanh duy nhất này ta có 7 phân đoạn âm thanh dành cho các hiệu ứng tính bằng giây.
- Envy: 0.0s (độ dài 2.5s)
- Gluttony: 2.7s (độ dài 1.0s)
- Greed: 3.7s (độ dài 1.1s)
- Lust: 5.0s (độ dài 2.2s)
- Pride: 7.2s (độ dài 1.35s)
- Sloth: 8.5s (độ dài 0.51s)
- Wrath: 9.1s (độ dài 3.0s)
Từ dữ liệu này, thông tin về Audio Sprite như sau
var AudioSpriteSinsDestroy = {
'SFX_DESTROY_ENVY' :[0.0, 2.5],
'SFX_DESTROY_GLUTTONY':[2.5, 1.0],
'SFX_DESTROY_GREED' :[3.6, 1.1],
'SFX_DESTROY_LUST' :[5.0, 2.2],
'SFX_DESTROY_PRIDE' :[7.2, 1.35],
'SFX_DESTROY_SLOTH' :[8.5, 0.51],
'SFX_DESTROY_WRATH' :[9.1, 3.0]
};Tổ chức lại codes để sử dụng Audio Sprite trên
<!DOCTYPE html>
<html>
<head>
<title>STDIO Audio Sprite demo</title>
<script>
function loadAudio() {
let audioObj = document.createElement("audio");
audioObj.setAttribute("id", "id-audio");
let sourceObj = document.createElement("source");
sourceObj.setAttribute("type", "audio/ogg");
sourceObj.setAttribute("src", "STDIO_7_Sins_UNIQUE_SFX.ogg");
audioObj.appendChild(sourceObj);
document.getElementById("id-stdio").appendChild(audioObj);
document.getElementById("id-audio").load();
}
const AudioSpriteSinsDestroy = {
SFX_DESTROY_ENVY: [0.0, 2.5],
SFX_DESTROY_GLUTTONY: [2.5, 1.1],
SFX_DESTROY_GREED: [3.6, 1.1],
SFX_DESTROY_LUST: [4.7, 2.2],
SFX_DESTROY_PRIDE: [6.9, 1.6],
SFX_DESTROY_SLOTH: [8.5, 0.4],
SFX_DESTROY_WRATH: [8.9, 3.0],
};
function playAudio(partName) {
let audioObj = document.getElementById("id-audio");
audioObj.currentTime = AudioSpriteSinsDestroy[partName][0];
audioObj.addEventListener("timeupdate", function () {
if (
this.currentTime >
AudioSpriteSinsDestroy[partName][0] +
AudioSpriteSinsDestroy[partName][1]
) {
this.pause();
}
});
audioObj.play();
}
</script>
</head>
<body id="id-stdio" onload="loadAudio()">
<button onclick="playAudio('SFX_DESTROY_ENVY')">SFX_DESTROY_ENVY</button>
<button onclick="playAudio('SFX_DESTROY_GLUTTONY')">SFX_DESTROY_GLUTTONY</button>
<button onclick="playAudio('SFX_DESTROY_GREED')">SFX_DESTROY_GREED</button>
<button onclick="playAudio('SFX_DESTROY_LUST')">SFX_DESTROY_LUST</button>
<button onclick="playAudio('SFX_DESTROY_PRIDE')">SFX_DESTROY_PRIDE</button>
<button onclick="playAudio('SFX_DESTROY_SLOTH')">SFX_DESTROY_SLOTH</button>
<button onclick="playAudio('SFX_DESTROY_WRATH')">SFX_DESTROY_WRATH</button>
</body>
</html>
