Cách chèn nhạc mp3, audio vào website trong HTML

Cũng gần giống việc chèn video hoặc kể cả hình ảnh vào website trong HTML thì bạn cũng có một số lựa chọn để chèn 1 bản nhạc yêu thích vào website của mình có thể là 1 blog nhỏ hoặc chèn vào website của bạn cho thêm phần sinh động.

Nếu bạn muốn chèn 1 video nhạc thì có thể xem hướng dẫn trong bài viết này: Cách chèn VIDEO vào web trong HTML

Còn trong bài viết này mình sẽ hướng dẫn chèn 1 bài hát dạng audio âm thanh vào website của bạn thông qua 1 website trung gian bất kỳ hoặc bằng HTML có hỗ trợ sẵn chèn trực tiếp file.

1. Chèn nhạc thông qua website trung gian

Trước tiên nếu file âm thanh ở máy tính của bạn thì bạn có thể up lên 1 số website trung gian như: nhaccuatui.com, soundcloud.com sau đó chèn thông qua chức năng embed. HOặc nếu 1 bài hát yêu thích nào đó có sẵn trên các website này rồi thì bạn chỉ việc chọn code nhúng và dán vào bất kỳ vị trí nào bạn muốn hiển thị nhạc sẽ được chèn vào website của bạn.

Ví dụ ở đây mình có 1 bài hát trên nhaccuatui.com muốn chèn vào website thì bạn sẽ mở bài hát đó lên sau đó click vào Chia sẻ chọn tùy chọn:

  • Bình thường: Bạn phải click vào Play thì nhạc mới phát
  • Tự động play: Load xong nó sẽ tự động phát nhạc
  • Nhạc nền: Nhạc sẽ chạy ngầm tự động không hiển thị bài hát, tuy nhiên nên hạn chế chức năng này vì sẽ gây phiền phức cho người dùng vì đa số không thích. Nếu có chèn thì chọn một số bài hát nhẹ nhàng và phù hợp thường chỉ sử dụng trong một số ngày đặc biệt
chen-nhac-vao-website.jpg

Sau khi chọn xong các bạn copy code Embed và dán vào vị trí bạn muốn nó xuất hiện trên website, ví dụ mình có code đơn giản như sau dán vào giữa thẻ <p>

code-chen-nhac-vao-website.jpg

Kết quả chúng ta sẽ có như sau. Các bạn có thể chỉnh lại chiều cao và chiều rộng của khung nhạc này

chen-nhac-vao-web.jpg
Nếu chọn Nhạc nền thì khung nhạc sẽ không xuất hiện nhưng bạn vẫn nghe thấy bài hát. Tương tự với các website khác như mp3, soundcloud bạn đều có thể chèn theo cách này ví dụ trên soundcloud bạn sẽ chọn Share --> Embed --> Copy code và dán vào thôi.

2. Chèn nhạc bằng HTML5

HTML5 là phiên bản giúp người dùng có thể dễ dàng chèn video, audio vào mà không cần sử dụng player. Thẻ <audio> sẽ giúp các bạn thực hiện điều này. Trước tiên bạn sẽ phải up file audio lên host của mình trước tốt nhất là định dạng mp3 để các trình duyêt đều hỗ trợ.

Mã:
<audio controls>
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ HTML5
</audio>

Thay đường link trong src bằng link nhạc của bạn là xong. Nhớ phải là đuôi mp3 đó nhé.
 
  • Chủ đề
    audio chen nhac vao web
  • Top