Thẻ âm thanh css

Phần tử  trong HTML

Ta có thể chạy một file audio trong HTML, bằng cách sử dụng phần tử

Ví dụ

Kết quả

Trình duyệt của bạn không hỗ trợ phần tử âm thanh

Âm thanh trong HTML – Cách làm việc?

Các thuộc tính điều khiển cho phép hiển thị điều khiển cho âm thanh như. run,tạm dừng và âm lượng

Phần tử  cho phép bạn chỉ định các file audio mà trình duyệt có thể lựa chọn từ đó. Nếu có nhiều file audio được hỗ trợ thì trình duyệt sẽ sử dụng định dạng đầu tiên.

Đoạn văn bản thông báo nằm giữa thẻ sẽ chỉ hiển thị khi trình duyệt đó không hỗ trợ phần tử 

Âm thanh trong HTML – trình duyệt hỗ trợ

Trong HTML5, có 3 định dạng âm thanh được hỗ trợ. MP3, Wav và Ogg

Mỗi loại trình duyệt hỗ trợ các định dạng khác nhau

Âm thanh trong HTML – các loại Phương tiện

HTML Audio – Các phương thức, thuộc tính và sự kiện

HTML5 sử dụng  DOM cho các phương thức, thuộc tính và các sự kiện cho phần tử 

DOM cho phép bạn tải, chạy, dừng các âm thanh, đồng thời để bạn thiết lập thời gian và âm lượng

Ngoài DOM còn có các sự kiện có thể đưa ra cho bạn thông báo chuẩn âm thanh đang chạy, đang tạm dừng, v. v

Thẻ được sử dụng để nhúng nội dung âm thanh vào tài liệu, chẳng hạn như âm nhạc hoặc các luồng âm thanh khác

Thẻ chứa một hoặc nhiều thẻ

Văn bản giữa và các thẻ sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử

Thẻ âm thanh là một thẻ mới trong HTML5, nó giúp ta trực tiếp chèn một tệp âm thanh vào trong HTML mà không cần Flash. Trong bài viết này, mình sẽ hướng dẫn cơ bản cách điều khiển tag Audio này bằng Javascript

Trong bài mình sử dụng jQuery để điều khiển nó, vì jQuery có cách chọn dễ dàng hơn là sử dụng Javascript thuần túy. Và mấy câu chọn trong Javascript thì rất là dài. ))

Cách sử dụng Audio Tag trong HTML5

Đơn giản chỉ cần thêm đoạn mã này và thay thế

[CodePen height=300 show=result href=sqzxg user=jshung92]

Bạn có thể xem thêm về Audio Tag theo liên kết ở cuối bài

Control by jQuery

Audio Player other nhau theo trình duyệt sẽ làm bạn khó khăn khi thiết kế giao diện. Do đó, bạn cần sử dụng jQuery để điều khiển trình phát. Trong bài chỉ nêu cách hoạt động không giao diện HTML-CSS, bạn có thể tự nghiên cứu thêm vào

Tạo tệp HTML với nội dung sau

    
    


    Play
    Pause
    Stop

    Volume +
    Volume -

    
    

Ta sẽ tạo thẻ Audio bằng jQuery nên không cần phải gắn thẻ Audio trong tệp trên. Các bộ điều khiển cơ bản mà ta sẽ làm là. phát, tạm dừng, dừng, tăng/giảm âm lượng

Tạo tệp

(function($){
    play    = $('#play');
    pause   = $('#pause');
    stop    = $('#stop');
    volup   = $('#volup');
    voldown = $('#voldown');

    //Song
    song    = new Audio();
    song.type= 'audio/mpeg';
    song.src='Alizee - La isla bonita.mp3';
})(jQuery);

Mã tạo đối tượng âm thanh gán tên là bài hát với loại thuộc tính và src.

Các chức năng

Tiếp theo đến thiết lập các chức năng. Đối tượng âm thanh có chức năng tương ứng với chức năng phát/tạm dừng, chức năng dừng thì ta giả lập bằng cách dừng âm thanh và đặt giá trị của

play.click(function (e) {
    e.preventDefault();
    song.play();
});

pause.click(function (e) {
    e.preventDefault();
    song.pause();
});

stop.click(function (e) {
    e.preventDefault();
    song.pause();
    song.currentTime = 0;
});

Đối tượng âm thanh sử dụng giá trị của

    
    


    Play
    Pause
    Stop

    Volume +
    Volume -

    
    

    
    


    Play
    Pause
    Stop

    Volume +
    Volume -

    
    

    
    


    Play
    Pause
    Stop

    Volume +
    Volume -

    
    

ĐƯỢC RỒI. This is going to complete the direction using Javascript control tag Audio in HTML5. Đọc có gì thắc mắc hay đóng góp ý kiến ​​thì comment lại nhé. Mình sẽ cố gắng trả lời những gì mà mình biết

You can see full demo theo link này. http. // cdpn. io/uIfzn. Và cũng có thể tải mã nguồn ở liên kết cuối bài