Tôi vẫn nhớ vào đầu những năm 2000 khi chơi đa phương tiện (âm thanh và video) trực tuyến có rất nhiều ràng buộc. Ngày nay, chúng ta có nhiều cửa hàng để phát âm thanh như last.fm hoặc phát video chẳng hạn như Youtube.
Nếu bạn đang chạy một trang web cho podcasting và muốn tạo một trình phát đa phương tiện phù hợp với thiết kế web tổng thể của bạn, thì bài đăng này có lẽ là dành cho bạn.
Những gì chúng ta cần
Trước khi tạo trình phát âm thanh, chúng ta cần chuẩn bị một số công cụ cho nó: jPlayer , jQuery và một bộ phông chữ có tên là FontAwesome.
- Trước hết, hãy tải xuống jPlayer. JPlayer là một jQuery Plugin cho phép chúng tôi chạy đa phương tiện trên trang web của mình mà không gặp rắc rối. Miễn là bạn có thể code HTML và CSS, bạn đã sẵn sàng.
- jPlayer về bản chất là một plugin jQuery, do đó chúng ta cũng cần tải xuống jQuery để nó hoạt động.
- Chúng ta cũng cần một số biểu tượng cho giao diện của trình phát đa phương tiện và lần này mình sẽ sử dụng FontAwesome để cung cấp các biểu tượng.
Chúng ta sẽ giải nén tất cả các tệp đã tải xuống và đặt tất cả nội dung, bao gồm tệp jPlayer, jQuery và phông chữ vào cùng một thư mục. Sau đó liên kết file jquery.js và jquery.jplayer.min.js đến file HTML như sau:
<link rel="stylesheet" href="css/normalize.css"> <link type="text/css" href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
Như bạn có thể thấy, ngoài thư viện jQuery và jPlayer, chúng ta cũng đã liên kết hai tệp CSS trong đó. Cái đầu tiên có tên normalize.css sẽ đặt lại và giúp trang web hiển thị nhất quán hơn trên các trình duyệt, trong khi cái thứ hai, style.css là nơi mình sẽ “trang điểm” cho giao diện.
File âm thanh dùng cho demo
Để trình diễn trong hướng dẫn này, bài viết sẽ sử dụng file âm thanh của Kelli Anderson từ buổi thuyết trình của cô ấy tại TEDx Pheonix.
Cấu trúc HTML markup
Bây giờ, đã đến lúc code HTML cho trình phát âm thanh và dưới đây là đoạn code HTML mà chúng ta cần.
Điều quan trọng từ đoạn code này là phần thuộc tính id=jquery_jplayer_1 được gán trong div chứa tất cả những thứ này. ID này được sử dụng để liên kết cấu trúc này với jPlayer sau này thông qua hàm jQuery.
Hơn nữa, tất cả các lớp giao vào cấu trúc sau, bao gồm jp-play, jp-pause, jp-mute và jp-unmute là tất cả các lớp tiêu chuẩn được sử dụng trong jPlayer.
Do code được build sẵn nên bạn không nên thay đổi các lớp này cũng như thuộc tính id để giúp mọi thứ dễ dàng hơn khi code trình phát âm thanh sau này (trừ khi bạn thực sự biết mình đang làm gì).
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-title">
<ul>
<li>TEDxPhoenix - Kelli Anderson - Disruptive Wonder for a Change</li>
</ul>
</div>
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1"></a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1"></a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute"></a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"></a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
Đoạn code HTML này bạn có thể thắc mắc các ký tự sau: , ,  và . Các ký tự này là các số HTML đặc biệt để tham chiếu và hiển thị các ký tự biểu tượng đến từ FontAwesome.
Kích hoạt JPlayer
Tiếp theo, chúng ta chỉ cần kích hoạt trình phát bằng đoạn mã dưới đây. Trong đoạn code này, chúng ta cung cấp các nguồn âm thanh và như bạn có thể thấy bên dưới, chúng tôi đã thêm hai nguồn mp3 và oga. Định dạng oga dạng sẽ mở rộng khả năng tương thích trình duyệt chéo, đặc biệt là trong Firefox và Opera.
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp3",
oga: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogg"
});
},
swfPath: "/js",
supplied: "mp3,oga"
});
});
Sau khi chúng ta thêm tập lệnh này, âm thanh thực sự đã có thể phát được và nếu chúng tôi kiểm tra đoạn HTML bằng Firebug hoặc các Công cụ dành cho nhà phát triển khác, chúng ta có thể tìm thấy một <audio>phần tử HTML5 mới cũng được tạo như ảnh dưới:
Chỉnh sửa lại giao diện
Trong phần này, chúng ta sẽ bắt đầu thêm các kiểu để làm cho trình phát âm thanh trông đẹp hơn và chúng ta sẽ bắt đầu bằng cách xác định dùng phông chữ mới và xóa gạch dưới khỏi phần tử anchor.
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot?#iefix") format("eot"),
url("fonts/fontawesome-webfont.woff") format("woff"),
url("fonts/fontawesome-webfont.ttf") format("truetype"),
url("fonts/fontawesome-webfont.svg#FontAwesome") format("svg");
font-weight: 400;
font-style: normal;
}
a {
text-decoration: none;
}
.jp-jplayer,.jp-audio {
width: 420px;
margin: 50px auto;
}
Tiêu đề cho trình phát
Chúng ta sẽ không thay đổi nhiều kiểu phần này, vì nó chỉ chứa tiêu đề văn bản của âm thanh đang được phát. Chúng ta sẽ chỉ làm cho văn bản tiêu đề nhỏ hơn và chuyển sang màu xám.
.jp-title {
font-size: 12px;
text-align: center;
color: #999;
}
.jp-title ul {
padding: 0;
margin: 0;
list-style: none;
}
Vùng chứa trình phát
Giao diện trình phát âm thanh được chứa trong một lớp div được gán với jp-gui.
Bạn có thể thấy trong ảnh chụp màn hình ở trên trình phát đa phương tiện của chúng ta sẽ trông như thế nào. Chúng ta áp dụng các màu chuyển cho giao diện và chúng ta sử dụng số màu này cho màu bắt đầu #f34927 và #dd3311 cho màu kết thúc. Ngoài ra đảm bảo rằng thuộc position cho div là relative.
.jp-gui {
position: relative;
background: #f34927;
background: -moz-linear-gradient(top, #f34927 0%, #dd3311 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));
background: -webkit-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: -o-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: -ms-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: linear-gradient(to bottom, #f34927 0%,#dd3311 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1);
border-radius: 3px;
overflow: hidden;
margin-top: 10px;
}
Giao diện cho các nút điều khiển
Đây là phần điều khiển để người dùng điều khiển âm thanh, chẳng hạn như nút phát và tạm dừng, nút âm lượng và tắt tiếng. Trong phần này, chúng ta đặt thuộc font-family thành FontAwesome, và chuyển màu văn bản thành màu trắng cũng như thêm bóng văn bản.
.jp-controls {
padding: 0;
margin: 0;
list-style: none;
font-family: "FontAwesome";
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.jp-controls li {
display: inline;
}
.jp-controls a {
color: #fff;
}
Nút Play và Pause
Đối với phát và tạm dừng cũng như nút âm lượng, chúng ta sẽ đặt position của chúng thành absolute, đó là lý do tại sao chúng ta đặt .jp-gui thành positive trước đó. Vì vậy, vị trí của các nút này sẽ liên quan đến cha mẹ gần hơn của chúng hơn là cửa sổ trình duyệt.
.jp-play,.jp-pause {
width: 60px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 43px;
border-right: 1px solid #d22f0f;
}
.jp-controls .jp-play:hover,.jp-controls .jp-pause:hover {
background-color: #de3918;
}
.jp-mute,.jp-unmute {
position: absolute;
right: 55px;
top: 0;
width: 20px;
height: 40px;
display: inline-block;
line-height: 46px;
}
.jp-mute {
text-align: left;
}
.jp-time-holder {
color: #FFF;
font-size: 12px;
line-height: 14px;
position: absolute;
right: 90px;
top: 14px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
Thanh tiến trình và thanh âm lượng
Thanh tiến trình sẽ có giao diện tương tự, chúng chỉ khác nhau về kích thước. Tiến trình rõ ràng phải dài hơn và lớn hơn thanh âm lượng.
.jp-progress {
background-color: #992E18;
border-radius: 20px 20px 20px 20px;
overflow: hidden;
position: absolute;
right: 133px;
top: 15px;
width: 210px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}
.jp-play-bar {
height: 12px;
background-color: #fff;
border-radius: 20px 20px 20px 20px;
}
.jp-volume-bar {
position: absolute;
right: 10px;
top: 17px;
width: 45px;
height: 8px;
border-radius: 20px 20px 20px 20px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
background-color: #992E18;
overflow: hidden;
}
.jp-volume-bar-value {
background-color: #fff;
height: 8px;
border-radius: 20px 20px 20px 20px;
}
Đó là tất cả các mã chúng ta cần. Bây giờ bạn có thể xem bản demo cũng như tải xuống toàn nguồn từ các liên kết bên dưới:
Nguồn tham khảo: Hongkiat