Music trên mobile hỗ trợ HTML5 Audio Tag - Php nâng cao - Thủ thuật tin học, Thủ thuật blog, Tải phần mềm miễn phí
Bạn đang xem: Thiết kế website  »  Php nâng cao

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

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.

Demo: http://demo.shopweb.vn/MP3-html5/  hoặc http://buocchanthien.com/audio

Ý 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:

 

  

Your browser does not support the audio element.
 
 
  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:

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:

1
2
3
4
5
  
  
Your browser does not support the audio element.
 

Đ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:

1
2
3
4
5
6
7
 
    
    
    
    
 

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

1
2
3
4
5
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:

1
#t=[bắtđầu][,kếtthúc]
1

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

Demo: http://demo.shopweb.vn/MP3-html5/  hoặc http://buocchanthien.com/audio

 

 

 

 

 

 

 

 

 

 

 

Bài viết liên quan: