Thẻ âm thanh css

Trước khi HTML5 ra đời, các tệp âm thanh chỉ có thể được sử dụng trên các trình duyệt web khi có các chương trình hỗ trợ [như flash]

Phần tử trong HTML5  là một chuẩn để có thể đưa các file audio vào trang web.

Support browser

Dưới đây là bảng xác định các phiên bản trình duyệt đầu tiên hỗ trợ phần tử .

Phần tử  4.09.03.54.010.5

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ụ

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

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ẻ và 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

Trình duyệtMP3WavOggInternet ExplorerCóKhôngKhôngChromeCóCóCóFirefoxCóCóSafariCóCóKhôngOperaCóCóCó

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

Định dạng fileKiểuMP3audio/mpegOggaudio/oggWavaudio/wav

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ẻ

1 với các nguồn âm thanh khác nhau. Trình duyệt sẽ chọn nguồn đầu tiên mà nó hỗ trợ

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ế

4 là đường dẫn tệp âm thanh cần thêm. Tùy thuộc vào trình duyệt đang sử dụng mà Trình phát âm thanh mặc định sẽ khác nhau

[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

    
    Audio with jQuery


    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

5 và thêm vào đoạn mã

[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.

6 là URL của tệp âm thanh và các đoạn mã sau phải thêm vào trước dòng

7

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

8 là 0

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

    
    Audio with jQuery


    Play
    Pause
    Stop

    Volume +
    Volume -

    
    

0 để thiết lập âm lượng của âm thanh.

    
    Audio with jQuery


    Play
    Pause
    Stop

    Volume +
    Volume -

    
    

0 value value boost from 0 to 1. Ta chọn mỗi lần nhấp Âm lượng +/Âm lượng – sẽ tương ứng với tăng/giảm 0. 05 value of

    
    Audio with jQuery


    Play
    Pause
    Stop

    Volume +
    Volume -

    
    

0

________số 8

ĐƯỢ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