Trước đây để chèn nhạc vào blog ta phải dùng một plugin của bên thứ 3 với sự hỗ trợ của flash tuy nhiên khi HTML5 ra đời đã giúp cho các webmaster và những người quản trị nội dung nhẹ gánh hơn rất nhiều. Bài này sẽ hướng dẫn bạn tự tạo ra một trình nghe nhạc của riêng mình với việc sử dụng HTML5, CSS3 và JavaScript.
MediaElement.js
MediaElement.js là một thư viện javascript miễn phí, hỗ trợ việc tạo ra các palyer có khả năng chạy trên hầu hết các trình duyệt. Chi tiết bạn có thể tham khảo trang MediaElementy. Trong ví dụ này chúng ta sẽ sử dụng MediaElement.js, vì vậy trước tiên bạn hãy tải thư viện đó tại đây.
Sau đó, giải nén, đổi tên thư mục MediaElement thành js.
HTML
Trong HTML, để sử dụng được code javascript và css có sẵn thì ta cần tham chiếu tới nó như sau:
[sourcecode language=”html”]
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="/css/style.css" media="screen">
</head>
[/sourcecode]
Bây giờ, chúng ta bắt đầu xây dựng giao diện cho trình nghe nhạc. Trước tiên, hãy tạo một thẻ div với tên audio-player. Thẻ này là khung chứa các thuộc tính như Tên bài hát, hình ảnh đại diện, nút play, pause….
[sourcecode language=”html”]
<div class="audio-player">
<h1>Tình về nơi đâu</h1>
<img class="cover" src="/img/cover.jpg" alt="">
<audio id="audio-player" src="/media/demo.mp3" type="audio/mp3" controls="controls"></audio>
</div>
[/sourcecode]
Lưu ý là đối với hình ảnh, chúng ta lưu vào thư mục img, còn đối với bài hát thì lưu vào thư mục media.
Đặt đoạn script này nằm trong thẻ <body>
[sourcecode language=”html”]
</span></h1><h1><span style="font-family:Arial; font-size:11pt">
<script>
$(document).ready(function() {
$(‘#audio-player’).mediaelementplayer({
alwaysShowControls: true,
features: [‘playpause’,’volume’,’progress’],
audioVolume: ‘horizontal’,
audioWidth: 400,
audioHeight: 120
});
});
</script>
</span></h1><h1><span style="font-family:Arial; font-size:11pt">[/sourcecode]
Định dạng CSS
Cơ bản, chương trình của chúng ta đã có thể hoạt động được, tuy nhiên vẫn chưa được đẹp. Vì vậy, công việc tiếp theo là trang trí bằng css.
[sourcecode language=”css”]
.audio-player,
.audio-player div,
.audio-player h1,
.audio-player a,
.audio-player img,
.audio-player span,
.audio-player button {
margin: 0;
padding: 0;
border: none;
outline: none;}
div.audio-player {
position: relative;
width: 400px;
height: 120px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
[/sourcecode]
Đoạn code sau dùng để định dạng tên bài hát và ảnh đại diện
[sourcecode language=”css”]
.audio-player h1 {
position: absolute;
top: 37px;
left: 165px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
color: #ececec;
text-shadow: 1px 1px 1px rgba(0,0,0, .5);}
.audio-player .cover {
position: absolute;
top: 0;
left: 0;}
[/sourcecode]
Play, Pause, Mute, Unmute
Phần này, chúng ta định dạng các nút như Play, Pause để thêm sinh động.
[sourcecode language=”css”]
</span></h1><h1><span style="font-family:Arial; font-size:11pt">
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
position: absolute;
text-indent: -9999px;}
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 21px;
height: 21px;
top: 35px;
left: 135px;
background: transparent url(../img/play-pause.png) 0 0;}
.mejs-controls .mejs-pause button { background-position:0 -21px; }
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
width: 14px;
height: 12px;
top: 70px;
left: 140px;
background: transparent url(../img/mute-unmute.png) 0 0;}
.mejs-controls .mejs-unmute button { background-position: 0 -12px; }
</span></h1><h1><span style="font-family:Arial; font-size:11pt">[/sourcecode]
.mejs-controls .mejs-pause button {
width: 21px;
height: 21px;
top: 35px;
left: 135px;
background: transparent url(../img/play-pause.png) 0 0;}
.mejs-controls .mejs-unmute button {
width: 14px;
height: 12px;
top: 70px;
left: 140px;
background: transparent url(../img/mute-unmute.png) 0 0;}
</span></h1><h1><span style="font-family:Arial; font-size:11pt">[/sourcecode]
Thanh Volume
Thanh volume có chiều dài là 200px và chiều rộng là 8px. Ngoài ra chúng ta có thể tạo shadow, bo góc kèm nhiều hiệu ứng khác.
[sourcecode language=”css”]
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 71px;
left: 165px;
cursor: pointer;}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 200px;
height: 8px;
background: #212227;
-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
[/sourcecode]
Bây giờ chúng ta tiếp tục định dạng phần “Volume hiện tại”.
[sourcecode language=”css”]
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 6px;
top: 1px;
left: 1px;
background: url(../img/volume-bar.png) repeat-x;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
[/sourcecode]
Thanh Progress
[sourcecode language=”css”]
.mejs-controls div.mejs-time-rail { width: 400px; }
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 400px;
height: 5px;
left: 0;
bottom: 0;
cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;}
.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }
.mejs-controls .mejs-time-rail .mejs-time-loaded {
width: 0;
background: #cccccc;}
.mejs-controls .mejs-time-rail .mejs-time-current {
width: 0;
background: #64b44c;}
[/sourcecode]
Progres & Volume Handle
Chủ yếu phần này làm cho đẹp mắt thôi, chúng ta nên tạo nên 1 button, gọi là “Handle” nằm trên thanh Volume và Progress, giúp chúng ta dễ dàng di chuyển, thao tác với bài hát.
[sourcecode language=”css”]
.mejs-controls .mejs-time-rail .mejs-time-handle,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
position: absolute;
display: block;
width: 12px;
height: 14px;
top: -4px;
background: url(../img/handle.png) no-repeat;}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { top: -2px; }
[/sourcecode]
Tooltip
Cuối cùng, chúng ta định dạng thêm phần thời gian bài hát.
[sourcecode language=”css”]
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
background: url(‘/../img/time-box.png’);}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px;
display: block;
left: 0;
top: 4px;
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666666;
text-align: center;}
[/sourcecode]
Đây là phần hiển thị:
Sau bài này các bạn đã biết cách tự tạo ra một trình nghe nhạc của riêng mình, có thể chạy trên hầu hết các trình duyệt. Thật là tuyệt vời! Nhưng đây chỉ là một ví dụ nhỏ, với HTML5, CSS3 và MediaElement.js bạn có thể còn làm được nhiều điều tuyệt vời hơn thế! Mọi thứ đang chờ bạn khám phá !
Tham khảo http://y2graphic.com/html-va-css/huong-dan-tao-audio-bang-html5-va-css3
Cảm ơn nhé! Mình mới bắt đầu đụng vào html5 😀
Thanks nhé, đang tìm cái này chèn Web. để test thử xem nào ^^!