XtGem Forum catalog

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Hướng dẫn tự tạo Trình phát nhạc Online cho riêng mình - MP3 Player cực đẹp với HTML5 và CSS3

Admin* RoSino18k *
* 29-05-2016

Đây là một hiệu ứng đơn giản cho trình phát nhạc MP3 bằng CSS3 và HTML5 khá Đẹp. Ở bài này chúng ta sẽ không nhắc đến nó đẹp hay xấu hoặc v.v... mà chúng ta nên chú ý đến cách thức để tạo ra một vài hiệu ứng trực tiếp từ CSS3 và HTML5 code cơ bản mà mình đã từng share đó là *Code HTML5 Video Player Trình Phát Video cho Web/Wap/Blog Cơ Bản


Tại sao lại nên chú ý như vậy, bởi hầu hết các code share dạng này sẽ nén luôn ở trong javascript hoặc file hoặc post ra 1 đống code bạn chỉ cần copy và paste còn ở bài này sẽ chỉ cho các bạn biết ở đoạn nào có tác dụng gì và có ý nghĩa gì sẽ tốt hơn cho các bạn muốn học hỏi code và javascript

Link demo cho các bạn tham khảo: *DEMO MP3 Player HTML5 CSS3

Hướng dẫn tự tạo Trình phát nhạc Online cho riêng mình - MP3 Player cực đẹp với HTML5 và CSS3
[Tải ảnh]


Với các trình duyệt hỗ trợ HTML5 Audio, bạn có thể sử dụng:
<audio src="audio.mp3" preload="auto" controls autoplay loop>
<p>Trình duyệt của bạn không hỗ trợ HTML5 Audio</p>
</audio>

Hoặc
<audio preload="auto" controls autoplay loop>
<source src="audio.mp3" type="audio/mp3">
<p>Trình duyệt của bạn không hỗ trợ HTML5 Audio</p>
</audio>


Ở ví dụ trên ta đã sử dụng một số thuộc tính của HTML5 Audio:

- autoplay: Tập tin nhạc sẽ tự động chạy khi bắt đầu
- controls: Các điều khiển cho audio sẽ hiển thị theo mặc định của trình duyệt
- loop: Tập tin nhạc sẽ tự động lặp lại sau khi kết thúc
- preload: Tải thông tin của tập tin nhạc, có 3 tùy chọn:
+ none: Không load thông tin tập nhạc
+ auto: Tự động load thông tin tập tin nhạc
+ metadata: Load các siêu dữ liệu của tập tin nhạc
- src: Nguồn của tập tin nhạc

Tạo MP3 Player



Mình đã giới thiệu chung về HTML5 Audio. Giờ mình sẽ giới thiệu các bạn cách để xây dựng một MP3 Player cho riêng mình.

HTML



Đầu tiên mình sẽ xây dựng một audio với các thành phần sau:
- Tập tin nhạc
- Loading: tạo hiệu ứng đơn giản khi chạy nhạc
- Controls: gồm các điều khiển Play, Pause, Volumn, Seeking

<div class="player">
<audio id="player__source" src="audio.mp3">
<p>Trình duyệt của bạn không hỗ trợ HTML5 Audio</p>
</audio>
<div class="player__loading"></div>
<div class="player__control">
<button id="playPause"></button>
<span id="currentTime">00:00</span>
<input id="seek" type="range" min="0" value="0">
<span id="durationTime">00:00</span>
<button id="muted"></button>
</div>
</div>


JAVASCRIPT



HTML5 Audio cung cấp nhiều sự kiện giúp bạn điều khiển và đồng bộ hóa phát lại tập tin nhạc.
Muốn làm việc với HTML5 Audio đầu tiên ta truy vấn đến các thành phần audio mà ta đã xây dựng ở trên.
var player = document.getElementById('player__source'),
playLoading = document.querySelectorAll('.player__loading span'),
playPause = document.getElementById('playPause'),
currentTime = document.getElementById('currentTime'),
seek = document.getElementById('seek'),
durationTime = document.getElementById('durationTime'),
muted = document.getElementById('muted');


Play và Pause
Ta tiến hành kiểm tra nếu nhạc đang chạy sẽ nút Pause sẽ hiển thị và ngược lại.
playPause.addEventListener('click', playPauseMusic, false);

function playPauseMusic() {
if (player.paused) {
player.play();
// Kiểm tra thời gian hiện tại của bài nhạc
timeInterval = setInterval(timeUpdateMusic, 100);
// Thay đổi giá trị của seek
seek.addEventListener('change', seekMusic, false);
} else {
player.pause();
}
}

function timeUpdateMusic() {
// Thời gian toàn bộ của bài nhạc
durationTime.innerHTML = player.duration;
// Thời gian hiện tại của bài nhạc
currentTime.innerHTML = player.currentTime;
seek.max = player.duration;
seek.value = player.currentTime;
}

function seekMusic() {
player.currentTime = seek.value;
}


Volume - Âm Thanh
Tương tự như Play và Pause, ta cũng kiểm tra volume của nhạc đang tắt hay bật. Ở đây mình xây dựng volume chỉ có hai chức năng mở âm thanh và tắt âm thanh.
muted.addEventListener('click', mutedMusic, false);

function mutedMusic() {
if (player.muted) {
// Mở âm thanh
player.muted = false;
} else {
// Tắt âm thanh
player.muted = true;
}
}


CSS3



Với CSS3 bạn có thể sử dụng CSS3 Animation và Transtion để làm cho Player của bạn sinh động hơn. Ở ví dụ này mình sử dụng icon font để làm các nút như play và volume.
Hy vọng sau khi đọc bài viết hướng dẫn tạo mp3 player các bạn có thể tự thiết kế cho mình trình phát nhạc ưng í nhất.
Chúc các bạn thành công!

Code như demo mình hỗ trợ 2 phiên bản:
- Phiên bản full *mp3-player-html5-full.zip kèm theo cả file bài hát
- Phiên bản min *mp3-player-html5-min.zip mình đã loại bỏ file bài hát khá nhẹ các bạn dùng điện thoại có thể tải về dễ dàng.

Nguồn: DangThanh.Org
↓ Tập tin Đính kèm ↓
↑↑ Lượt xem: 300
score
Đánh giá: 4.5/ 5, 300 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-300]