Hướng dẫn chèn audio vào html

Thật đơn giản để chèn một trình nghe nhạc vào trang web.

Cách chèn trình nghe nhạc vào trang web

Để chèn một trình nghe nhạc vào trang web, ta sử dụng thẻ và thẻ theo cú pháp sau:

Hiện nay, thẻ

Định dạngĐuôiMedia Type
MP3 .mp3 audio/mpeg
Ogg .ogg audio/ogg
Wav .wav audio/wav


Xem ví dụ

Để đề phòng trường hợp tập tin âm thanh không tồn tại, hoặc trình duyệt không hỗ trợ định dạng âm thanh của tập tin của bạn. Khi đó, ta có thể sử dụng nhiều thẻ (nếu thẻ phía trên không hoạt động được thì sẽ đến phiên thẻ phía dưới)


Xem ví dụ

Các thuộc tính của thẻ

Thuộc tính dùng để cung cấp thêm thông tin, hành động cho trình nghe nhạc (Ví dụ như: tự động phát nhạc, phát lặp đi lặp lại, tắt tiếng,....).

Thuộc tínhÝ nghĩaXem ví dụ
controls hiển thị trình nghe nhạc Xem ví dụ
autoplay tập tin âm thanh sẽ được tự động phát khi trang web load xong. Xem ví dụ
loop phát lặp đi lặp lại tập tin âm thanh mỗi khi nó kết thúc Xem ví dụ
muted tắt volumn của trình nghe nhạc Xem ví dụ

Để sử dụng được website một cách thuần thục thì bạn cần phải biết chèn video, ảnh hay là audio, có thể nói theo cách khác là chèn tập tin kỹ thuật số, hình ảnh động. Nhưng hiện tại bạn vẫn chưa biết cách chèn audio, video thì có thể tham khảo ngay trong bài viết Cách chèn audio, video vào website này.

  • I. Webiste là gì?
  • II. Tại sao nên thêm video vào trong website
  • III. Webiste mang lại những lợi ích gì?
  • IV. Cách chèn audio, video vào trong website
    • 1. Định nghĩa về media
    • 2. Cách chèn video vào trong website
    • 3. Cách chèn audio vào trong website
    • 4. Cách chèn đối tượng kỹ thuật số với thẻ vào website
    • 5. Chèn video từ youtube vào trong website

I. Webiste là gì?

Hướng dẫn chèn audio vào html
Webiste là gì?

Website hay còn có tên gọi khác là trang web, trang web này bao gồm có tập hợp con, hình ảnh, video, flash,… Để được gọi là website thì bắt buộc phải có tên miền , tên miền phụ dùng để lưu trữ trên máy chủ.

Một trang website có thể được xây dựng theo tập tin HTMl, XHTML hoặc là HTTP, HTTPS hoặc bạn cũng có thể tạo website wordpress nếu không có nhiều kiến thức chuyên môn. Với website được xây dựng bằng HTML thì được vận hành bằng CMS hoạt động trên máy chủ và được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau chằng hạn như PHP, Java, .Net,..

Để tạo nên website hoàn chỉnh cần 3 phần chính đó là:

  • Hosting
  • Tên miền
  • Source code

II. Tại sao nên thêm video vào trong website

Với sự phát triển của công nghê ngày một hiện đại và phát triển thì đương nhiên nhu cầu mua sắm online cũng được mở rộng hơn. Nhu cầu thiết kế website qua hình ảnh, video ngày được các doanh nghiệp lựa chọn, vậy tại sao cần phải chèn video vào trong website? Để giải đáp câu hỏi này, bạn hãy theo dõi ở phần dưới nhé!

  • Bởi website được biết đến là trang tin giới thiệu các thông tin doanh nghiệp, để khách hàng biết đến các sản phẩm, dịch vụ.
  • Chèn video giúp cho người dùng ở lại trang lâu hơn
  • Tốc độ tải nhanh, tiết kiệm được dung lượng băng thông
  • Thu hút được nhiều khách hàng, khách hàng tiềm năng đến với doanh nghiệp
  • Tạo thương hiệu doanh nghiệp
  • Hướng tới khách hàng biết đến các sản phẩm bên đơn vị mình
  • Là trang mạng online gián tiếp hỗ trợ cho khách hàng
  • Công nghệ website phát triển mở đường cho các mô hình kinh doanh online như upload video lên website kết hợp với phần mềm quản lý trung tâm hay phần mềm dạy học để mở trung tâm dạy học online là một ví dụ thường thấy nhất.

III. Webiste mang lại những lợi ích gì?

  • Lợi ích mà website mang lại đó là có nhiều traffic, thu hút được nhiều khách hàng. Như vậy sẽ thúc đẩy doanh thu bán hàng cao hơn, tăng thêm thu nhập và khiến cho khách hàng biết đến nhiều hơn.
  • Khi người dùng truy cập vào website của bạn sẽ tìm được những sản phẩm họ muốn tìm, nếu sử dung tốt họ sẽ giới thiệu cho nhiều bạn bè khác nữa.
  • Website còn là nơi lưu trữ các thông tin đơn vị, thông tin sản phẩm từ đó có thể quản lý hàng hóa dễ hơn qua sử dụng các tính năng có trong website.

Nếu như bạn đang muốn biết cách chèn ảnh, audio hoặc chèn video nhưng bạn vẫn đang loay hoay chưa biết cách chèn. Thì trong phần này, chúng tôi sẽ hướng dẫn cho bạn cách chèn sao cho đúng cách, dễ nhớ nhất.

1. Định nghĩa về media

Hướng dẫn chèn audio vào html
Định nghĩa về media

Bạn có thể thấy được rằng, Media bao gồm nhiều định dạng khác nhau chẳng hạn như audio, video, music, ghi âm, hình ảnh động, phim,.. Hoặc có thể là bất cứ một định dạng nào khác mà bạn có thể xem, nghe và nhìn.

Vậy nên, trong website thường sẽ chứa đa kênh, đa phương tiện hướng tới người dùng, đáp ứng được tất cả nhu cầu mà người dùng mong muốn.

Nói về định dạng phổ biến thì bao gồm trong video thì có: mpeg, avi, wmn, quik time, real video, flash, ogg,…

Còn định dạng trong audio bao gồm midi, audio, wma, aac, ogg, mp4,..

2. Cách chèn video vào trong website

Hướng dẫn chèn audio vào html
Cách chèn video vào trong website

Có điều trước khi vào HTML thì một video chỉ có thể chạy được trên browser dưới sự hỗ trợ của plug-in flash. Khi đó bạn hoàn toàn có thể chèn video vào website thông quan thẻ

Để chèn video trong HTML thì bạn cần phải làm như sau:

Trình duyệt của bạn không hỗ trợ thẻ định dạng video

Tuy nhiên, trong đoạn text thì trình duyệt của bạn sẽ không hỗ trợ cho thẻ video và được hiển thị nếu như browser không hỗ trợ trong HTML5.

Bạn có thể xem qua đoạn mẫu:

Trình duyệt của bạn không hỗ trợ thẻ định dạng video

Hơn nữa, các thuộc tính của thẻ video được thể hiện cụ thể như sau:

Hầu như bất kỳ một loại thẻ HTML nào đều có các đặc tính chung, ngay cả video cũng vậy, các đặc tính chung đó bao gồm.

  • Contrlos: Với đặc tính này cho phép người dùng điều khiển các video như chạy, dừng và thay đổi âm lượng to – nhỏ video.
  • Width – height: Đây là độ rộng và cao của video
  • Source: Với thẻ source thì cho phép bạn định các file ở định dạng khác nhau mà trình duyệt hoàn toàn có thể chọn. Hầu hết các trình duyệt đều có thể định dạng lúc ban đầu có như vậy bạn mới có thể thấy thẻ

Ngoài ra, auto play còn tự động chạy video nhưng tiếc rằng  thuộc tính này không hỗ trợ cho các thiết bị như iphone, ipad,..

Ví dụ cụ thể như:

Trình duyệt của bạn không hỗ trợ thẻ định dạng video

Lưu ý: Tất cả các trình duyệt đều chèn định dạng MP4.

Nếu bạn sử dụng CMS WordPress sẽ được tích hợp thêm công cụ thêm Media và chỉ bạn chỉ cần upload video như một file bình thường.

3. Cách chèn audio vào trong website

Hướng dẫn chèn audio vào html
Cách chèn audio vào trong website

Chèn audio vào trong web cũng tương tự như chèn video vào trong website vậy. Và đây cũng được xem là thẻ HTML5.

Để chèn được âm thanh ở trong html thì trước hết bạn cần phải biết đến thẻ audio nhu sau:

Trình duyệt của bạn không hỗ trợ thẻ định dạng audio

Trong đó, các thuộc tính của thẻ audio thì bạn có thể nhận biết qua cách chèn âm thanh. Đó là các thuộc tính thẻ

Tương tự như vậy thẻ audio cũng vậy, có thuộc tính auto play giống video.

Trình duyệt của bạn không hỗ trợ thẻ định dạng audio

4. Cách chèn đối tượng kỹ thuật số với thẻ vào website

Ngoài các thẻ đặc trưng ra thì tùy vào từng loại tập tin mà bạn có các cách khác để  chèn các đối tượng kỹ thuật vào trong tài liệu HTML, chính xác hơn là sử dụng các thẻ như < object>;    à Đây là thẻ giúp bạn chèn được các đối tượng kỹ thuật số như java, flash, audio, video, PDF,..

  • Bạn có thể chèn đối tượng kỹ thuật với thẻ theo cú pháp

    Ví dụ như:

    Hoặc bạn có thể sử dụng thẻ chèn file html hoặc một hình ảnh nào khác

    Ví dụ như:

    • Các thuộc tính, định dạng của thẻ < object>

    + Width – Height: Độ rộng, độ cao của đối tượng thẻ kỹ thuật số

    + Type: Kiểu định dạng file media

    + Data- URL: Đây là thuộc tính giống với thuộc tính SRC, nó chỉ định URL của đối tượng sử dụng

    + Name: Tên đối tượng

    + Use map: Giống với use map thẻ

    Ngoài việc dùng thẻ thì bạn còn có các cách khác đó chính là chèn ảnh vào các đối tượng kỹ thuật số bằng cách sử dụng thẻ . Với cách sử dụng này thì bạn hãy áp dụng giống với thẻ để chèn các đối tượng kỹ thuật, cụ thể như sau:

    Thẻ HTML ngoài có các đặc tính chung thì nó còn có các đặc tính riêng là width, height, src và type.

    5. Chèn video từ youtube vào trong website

    Hướng dẫn chèn audio vào html
    Chèn video từ youtube vào trong website

    Với phương pháp chèn you tobe vào trong website không còn xa lạ gì nữa. Bạn có thể chèn video từ you tobe bằng cách dùng thẻ

    Ví dụ:

    Thế nhưng so với các thuộc tính của thẻ < iframe> thì ngoài những đặc tính chung HTML ra thì thẻ

    • Youtube playlist: chèn play list vào website thông qua list

    Ví dụ:

    • Youtube loop thiết lập video chạy một lần hay chạy mãi mãi.

    Giá trị thuộc tính gồm:

    + Giá trị mặc định, chạy một lập

    + Video được lặp lại nhiều lần và mãi mãi

    • Youtube controls có 2 giá trị như

    + Không cho người dùng điều khiển video

    + Giá trị mặc định, cho phép người dùng điều khiển video

    • Trong trình duyệt

    Cùng với sự phát triển không ngừng của trình duyệt thì phần lớn cho đến nay các trình duyệt đã hỗ trợ các định dạng media khác nhau. Tuy nhiên một số định dạng còn phải đòi hỏi các chương trình hỗ trợ plug-in.

    Hơn nữa sự phát triển của HTML5 còn giúp cho bạn chèn các fike đa phương tiện nhanh chóng, dễ hơn chỉ vài thao tác đơn giản.

    Đó là những kiến thức, cách chèn audio, video vào trong website mà bài viết Cách chèn audio, video vào website mang đến cho bạn. Các cách chèn audio, video cũng được hướng dẫn, giải đáp chi tiết trong từng phầm, từng mục của bài viết rất chi tiết.

    Hy vọng những gì mà The Sound Alarm chia sẻ trên đem đến nhiều kiến thức bổ ích cũng như các phương pháp cho bạn học hỏi và áp dụng vào thực tế.