Music trên mobile hỗ trợ HTML5 Audio Tag

Hi, chào các bạn lý do chính mình viết bài này là do mình không thể vào blog của mình có chứa các track mà mình thích trên con điện thoại “nhà quê” (theo như 1 người bạn gần đây của mình trêu thế :D =)) ) nhưng không sao vì mình viết trang đó dựa trên flash mà ^^

html5_audio

Gần đây việc phát triển của công nghệ web đã ra đời HTML5, cung cấp cho chúng ta một chuẩn mở các file nhạc mới. Đặc biệt đối với các thiết bị mobile đã không còn hỗ trợ flash nữa, các OS Mobile ví dụ như iOS và Android đã loại bỏ flash ra khỏi hệ thống và đưa html5 vào làm player thay thế chính.

Ý kiến của mình sau khi dùng là thấy nó khá hay, code đơn giản, option nhiều và dễ dùng, có thể control event bằng javascript, style các kiểu được không thua kém gì flash.

Để mở một file nhạc bằng html5 các bạn có thể sử dụng như sau:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

Hiện tại thì hầu hết các trình duyệt đã hỗ trợ cơ bản html5, có thể kể đến như Internet Explorer 9, Firefox, Opera, Chrome, và Safari. Đối với IE thì chỉ trừ IE8 trở về trước là không hỗ trợ.

Có khá nhiều thuộc tính trong thẻ audio nhưng cơ bản thì các bạn hay dùng thuộc tính “controls, autoplay, loop, preload, src”. Chính vì thế các bạn có thể kết hợp các thuộc tính vào trong thẻ nếu cần. HTML5 hỗ trợ các định dạng file MP3, Wav, và Ogg. Chỉ riêng đối với Ogg thì không phải trình duyệt nào cũng hỗ trợ.
Đối với type thì các bạn có thể dùng các type sau cho audio: audio/mp3, audio/ogg, audio/wav

Kết hợp các thuộc tính các bạn cũng có thể dùng như sau:

<audio src="audio.ogg" controls autoplay loop preload="auto">

Riêng đối với thuộc tính preload sẽ có một vài giá trị như: none, auto (tự động) hay metadata (chỉ load thông tin meta của file nhạc)

Các bạn cũng có thể kết hợp nhiều source để có thể next và prev như một trình chơi nhạc thực thụ ví dụ như bên dưới:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Điều khiển mở nhạc đơn giản bằng Javascript
Khi khởi tạo được element trên trình duyệt thì element đó sẽ có các phương thức như play, pause, volume cho bạn sử dụng. Ta có thể tham khảo đoạn code bên dưới:

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
	<button onclick="document.getElementById('player').pause()">Pause</button>
	<button onclick="document.getElementById('player').volume+=0.1">Tăng âm</button>
	<button onclick="document.getElementById('player').volume-=0.1">Giảm âm</button>
</div> 

hoặc muốn điều khiển việc qua nhanh hoặc chuyển đến một khoảng thời gian nào các bạn có thể xử lý hoàn toàn bằng script

var mediaElement = document.getElementById('player');
mediaElement.seekable.start();  // về đầu bài
mediaElement.seekable.end();    // về cuối bài
mediaElement.currentTime = 122; // chuyển đến giây thứ 122
mediaElement.played.end();      // trả về thời gian của bài nhạc đã mở

Ngoài ra bạn có thể truyền tham số về thời gian để player mở nhạc của bài hát đó bằng url trong src như sau:

Cú pháp:

#t=[bắtđầu][,kếtthúc]
<source src="horse.mp3#t=10,20" type="audio/mp3">

Trên đây là cách mà các bạn có thể viết một player để mở các file nhạc trên trình duyệt của mobile như iOS và Android, ngoài ra đối với video cũng sẽ tương tự, rảnh mình sẽ viết tiếp rảnh ghé http://xman.cc bằng mobile để thử html5 player nhé ^.^

Did you like this? Share it:

Tham khảo:

  • Visaonho

    Bạn ơi, mình muốn chạy file mp3 trên điện thoại, hoặc flie video trên điện thoại thì phải làm thế nào. Mình có nhúng theo kiểu của bạn nhưng vào điện thoại không thấy gì hết ( điện thoại mình thử là sam sung chạy androi )

    • http://thegioimanguon.com xman

      bạn đã code file nội dung html như nào ?

      • Visaonho

        Đây bác http://demo.visaonho.com/mobile.mp3.html
        Chạy trên trình duyệt thì được, vào mobile không thấy gì hết.

        • http://thegioimanguon.com xman

          mình check trên ip4s của mình chạy đc bạn nhé :)

          • http://visaonho.com/ Visaonho

            Dùng trình duyệt mặc định của điện thoại thì chạy được, còn opera mini thì không được, lạ nhỉ :D

          • http://thegioimanguon.com xman

            Opera mini hạn chế một số plugin và thường trang web sẽ bị compress trước khi được hiển thị

  • Anh Tuấn

    Từ ngày biết tới cái HTML5 audio thì mình mới được thử trên m.nhaccuatui.com, bây giờ m.mp3.zing.vn cũng có mà còn đẹp hơn nữa :D

    • http://thegioimanguon.com xman

      mình thấy có zing là đẹp nhất, nhưng thường thì các website lớn họ sẽ chạy trên app riêng chứ kô chạy qua browser nữa vì qua browser khi window bị mất focus thì cũng tương đương bài hát bị dừng lại không phát nữa