Thư viện javascript cho HTML5 Audio

Đăng bởi Neo trong mục Hướng dẫn vào 22 tháng 7, 2011 | Comments

Bạn muốn khi di chuột qua một nút, hình ảnh trên website sẽ xuất hiện âm thanh? Điều mà trước đây chỉ có thể làm được với Flash nay bạn có thể làm với HTML5. Thậm chí là dễ dàng hơn với Buzz - một thư viện javascript nhỏ giúp bạn điều khiển thành phần audio trong HTML5 dễ hơn.

Cách sử dụng

Sử dụng buzz rất đơn giản

// Khai báo đường dẫn tới file âm thanh
// ví dụ bạn có file âm thanh là ntuts.ogg, ntuts.mp3 và ntuts.acc
// đặt trong thư mục /sounds thì bạn khai báo như sau
var mySound = new buzz.sound( "/sounds/ntuts", {
    formats: [ "ogg", "mp3", "acc" ]
});
// Gọi âm thanh lên
mySound.play()
    .fadeIn()
    .loop()
    .bind( "timeupdate", function() {
       var timer = buzz.toTimer( this.getTime() );
       document.getElementById( "timer" ).innerHTML = timer;
    });

Ví dụ đơn giản: để khi di chuột qua #splash sẽ play mySound, bạn làm như sau (ở ví dụ dưới mình sử dụng jQuery để chọn và đưa sự kiện mouseenter vào #splash

$( '#splash' ).mouseenter( function() {
   mySound.play(); 
});

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter