STDIO
Tìm kiếm gần đây
    • 0

    Audio Sprite Và Audio Sprite Với HTML5

    Audio Sprite (hay có người gọi là Sound Sprite) Sprite Sheet hỗ trợ phát 1 đoạn âm thanh trong 1 file âm thanh trong JavaScript.
    18/09/2014
    28/07/2020
    4 phút đọc
    Audio Sprite Và Audio Sprite Với HTML5

    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ọi pause).

    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

    img_stdio_audio_sprite_example

    Download codes mẫu

    STDIOAudioSpriteDemo.zip

    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

    img_sfx_stdio_sins_destroy

    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

    img_sfx_sins_destroy

    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>

    Download demo hoàn chỉnh

    STDIOAudioSpriteFullDemo.zip

    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Sản phẩm

    Đề xuất

    HTML5 Sprite Animation - Tạo Đối Tượng Chuyển Động

    HTML5 Sprite Animation - Tạo Đối Tượng Chuyển Động

    Tạo hiệu ứng - animation với HTML5 và canvas và sprite sheet.

    JavaScriptJavaScript Nâng Cao

    25/08/2015

    Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x

    Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x

    Giới thiệu tổng quan về khái niệm cơ bản, một số cách dùng để khởi tạo ...

    Lập Trình GameCocos2d-x

    23/01/2015

    Khám phá thêm

    Cơ Bản Vẽ Trên <canvas> 2D Với HTML5

    Cơ Bản Vẽ Trên <canvas> 2D Với HTML5

    Giới thiệu HTML5 canvas, tạo đối tượng vẽ, các đường nét, hình chữ nhật, ...

    JavaScriptJavaScript Nâng Cao

    02/06/2014

    Phát Triển Game Funny Halloween Pumpkins với Cocos2d-x - Phần 1

    Phát Triển Game Funny Halloween Pumpkins với Cocos2d-x - Phần 1

    Hướng dẫn làm game cụ thể bằng Cocos2d-x với code mẫu và game mẫu.

    Lập Trình GameCùng làm game

    27/11/2015

    Giới Thiệu về Sprite - Sprite Sheet - Sprite Animation

    Giới Thiệu về Sprite - Sprite Sheet - Sprite Animation

    Giới thiệu về Sprite - Sprite Sheet - Sprite Animation, hướng dẫn 1 số ...

    Lập Trình GameKiến Thức Nâng Cao

    05/08/2014

    Giới Thiệu Audio Trong Cocos2d-x 3.x.x

    Giới Thiệu Audio Trong Cocos2d-x 3.x.x

    Giới thiệu về đối tượng Simple Audio Engine trong cocos2d-x 3.x.x. Các ...

    Lập Trình GameCocos2d-x

    23/01/2015

    Hiện Thực Game Zero Với Unity - Phần 3 - Điểm Số Và Progress Timer

    Hiện Thực Game Zero Với Unity - Phần 3 - Điểm Số Và Progress Timer

    Tiếp tục chuỗi bài viết Hướng Dẫn Hiện Thực Game Zero Với Unity, ở phần ...

    Lập Trình GameKiến Thức Nâng Cao

    10/08/2015

    Hiện Thực Game Zero Với Unity - Phần 5 - Âm Thanh Và Effect

    Hiện Thực Game Zero Với Unity - Phần 5 - Âm Thanh Và Effect

    Tiếp tục chuỗi bài viết Hướng Dẫn Hiện Thực Game Zero Với Unity, trong ...

    Lập Trình GameKiến Thức Nâng Cao

    11/08/2015

    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio

    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio

    Âm thanh, hình ảnh, video clip làm cho trang web thêm tiện ích, đẹp và ...

    HTML Cheat SheetCăn bản

    26/10/2015

    Sprite Animation trong DirectX 9

    Sprite Animation trong DirectX 9

    Hướng dẫn tạo tập tin lưu tọa độ các tile từ một sprite sheet có sẵn và ...

    Lập Trình GameDirectX

    02/11/2017

    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020