22/02/2015

Vesper - Trình nghe nhạc tuyệt đẹp dùng HTML5

HTML5 đã thêm vào các tag để thao tác với Multi-media như là audio/video. Theo đó, chúng ta không cần phải sử dụng các plugin như Flash mà vẫn có thể xem được video, nghe nhạc trực tiếp trên trình duyệt web.
Tuy nhiên, vấn đề là HTML5 chỉ cung cấp các tag với những chức năng tối thiểu vì vậy để người dùng có thể sử dụng được một cách đơn giản và dễ dàng hơn thì cần phải tùy biến. Mình xin giới thiệu một trong những công cụ thực hiện giải quyết vấn đề trên là Vesper.

Cách sử dụng Vesper

Player tuyệt đẹp có cả album, artist...
 Player tuyệt đẹp có cả album, artist...

Để có được player như trên, ta chỉ cẩn code đoạn HTML như sau cùng Vesper.

<div class="audio-set">
  <audio id="player" src="music/sample.mp3" controlls="controlls" ontimeupdate="zTimeUpdate()"></audio>
  <div id="art" class="audio-art"></div>
  <div class="audio-progress">
    <span id="currenttime" class="audio-currenttime">0:00</span>
    <progress id="time" class="audio-time" value="0" max="0"></progress>
    <span id="totaltime" class="audio-totaltime">0:00</span>
  </div>
  <div class="audio-controlls">
    <button id="play" onclick="zPlayPause()" class="audio-play"><icon>play</icon></button>
    <button onclick="zStop()" class="audio-stop"><icon>stop</icon></button>
    <button onclick="zMute()" class="audio-mute"><icon>volumeoff</icon></button>
    <button onclick="zVolumeDown()" class="audio-vdown"><icon>volumedown</icon></button>
    <button onclick="zVolumeUp()" class="audio-vup"><icon>volumeup</icon></button>
  </div>
  <div class="audio-info">
    <span id="artist"></span>
    <span id="album"></span>
  <div class="waveform"></div>
  </div>
    <a href="http://firezenk.github.com/html5player/"><div class="brand">vesper</div></a>
</div>

Các thông tin về tên ca khúc, album, nghệ sĩ, ca sĩ... được chương trình tự động lấy ra từ file mp3 và hiển thị lên player. Về điểu khiển audio được thực hiện bằng Javascript cho nên các bạn có thể tự code để điều khiển được. Cùng với các thao tác đơn gian như điều chỉnh âm lượng thì chúng ta có thể dễ dàng tạo được một trình chơi nhạc đơn giản và tuyệt đẹp cùng Vesper.


Vesper là chương trình viết bằng HTML5/JavaScript, mã nguồn được cung cấp sử dụng giấy phép MIT License.

Liên kết:
Vesper: HTML5 Audio player
FireZenk/html5player

Tags: , , ,

0 nhận xét “ Vesper - Trình nghe nhạc tuyệt đẹp dùng HTML5 ”

Đăng nhận xét

Nhận Tin

Đăng ký nhận tin

© 2015 @IT . All rights reserved.
Designed by SpicyTricks