Giới thiệu về Createjs-SoundJS - thư viện chơi nhạc No JQuery

Bài này mình viết giới thiệu về thằng SoundJs mà mình đã từng có dịp dùng qua.

Ngày gặp nhau, đó là ngày khách hàng dự án bên mình kêu về vấn đề muốn tối ưu hóa peformance cho dự án, cụ thể là việc dần dần loại bỏ các thư viện dependency JQuery và tìm các thư viện thay thế.

Và thế là mình gặp em này, yêu luôn từ cái nhìn đầu tiên (thực ra la sau khi đọc docs của em áy xem có ngon không =]]) và quyết định thay thế cho thằng mediaelement đang dùng trong dự án.

Em nó đây https://github.com/CreateJS/SoundJS và đây http://createjs.com/soundjs

Giới thiệu qua về Soundjs, như đã nói đầu tiên em này No JQuery. Và hỗ trợ hầu hết các trình duyệt, nó sẽ làm việc với trình duyệt hỗ trợ Web Audio và HTMLAudioElement, cụ thể là hỗ trợ trình duyệt nào version từ bao nhiêu trở lên các bạn xem thêm ở đây:

• Web Audio (http://caniuse.com/audio-api)
• HTMLAudioElement (http://caniuse.com/audio)

Và thêm giới thiệu từ trang chủ: "A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback." (đoạn này hơi ngại dịch mà cũng dễ thôi các bạn tự dịch =]] )

Đầu tiên lấy lấy em nó về như các em khác:

    bower install createjs-soundjs

và add to library

    //=require SoundJs/soundjs-0.6.1.min

Ok, giờ thì chiến với em nó thôi.

Sau đây là 1 ví dụ easy nhất để chơi 1 bài nhạc:

    function init(){
        createjs.Sound.registerSounds(soundPath, soundId);
        var soundInstance = createjs.Sound.createInstance(soundId);

    }

    function playSound(){
        soundInstance.play();
    }

Khá đơn giản phải không. để pause và resume chúng ta sử dụng

    //pause
    soundInstance.paused = true;

    //resume
    soundInstance.paused = false ;

    //stop
    soundInstance.stop();

Để chơi 2 hay nhiều bài hát mình có 1 ví dụ như sau:

    function init(){
        var audioPath = "../../_assets/audio/";
        var sounds = [
            {id:"bai_goc", src:"We_don't_talk_anymore.mp3"},
            {id:"dao_nhac", src:"Chung_ta_khong_thuoc_ve_nhau.mp3"}
        ];
        createjs.Sound.registerSounds(sounds, audioPath);
        var soundInstance = createjs.Sound.createInstance(soundId);

    }

    function playSound(){
        soundInstance.play();
    }

Để set âm lương cho bài hát, sử dụng

    soundInstance.volume = 0.5;

mặc định giá trị sẽ là 1.

Tiếp theo sẽ là 1 ví dụ về preload với soundjs. Trước khi chơi 1 bài hát, trên view thường mình sẽ cần show ra thời lượng của bài hát đó, soundJs cung cấp cho mình hàm getDuration() để mình có thể lấy được bài thời gian bài hát đó. Ở ví dụ này mình sẽ load bài hát trước khi lấy thời gian của nó.

    function init(){
        createjs.Sound.on("fileLoad", handleLoad)
        createjs.Sound.registerSounds(soundPath, soundId);
    }

    function handleLoad(){
        var soundInstance = createjs.Sound.createInstance(soundId);
    }

    var duration = soundInstance.getDuration();

Trong ví dụ trên, trước khi bạn play bài hát bạn có thể lấy được thời lượng cảu nó. Trên đây chỉ là một số ví dụ rất cơ bản với soundJs, ngoài ra bạn còn có thể làm được việc với nó, như cho chạy từ giây thứ bao nhiều đến bao nhiêu,...etc

Rất nhiều thứ dành cho các bạn tiếp tục tìm hiểm tại đây http://www.createjs.com/docs/soundjs/modules/SoundJS.html

Hy vọng bài viết là 1 sự gợi ý nho nhỏ cho các bạn trong việc sử dụng thư viện chơi media với no jquery