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. Thật dễ dàng để coi sự khởi đầu là điều hiển nhiên, đặc biệt là vì 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.
Trong bài đăng này, như tiêu đề ngụ ý, chúng ta sẽ tạo Web Audio Player. Nếu bạn đang điều hành 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ấp vào nút Demo để xem trình phát âm thanh sẽ trông như thế nào.
Cách tùy chỉnh Trình phát âm thanh SoundCloud
Phát trực tuyến âm thanh đã xuất hiện trên Internet từ năm 1990 và không có nhiều luồng âm thanh phổ biến … Đọc thêm
Điều 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ố mục chính cho nó: jPlayer, jQuery và một bộ biểu tượng phông chữ được gọi là FontAwesome.
Trước hết, chúng ta 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ể HTML và CSS, bạn đã sẵn sàng.
Đề xuất đọc: Hãy xem hướng dẫn HTML / CSS3 của chúng tôi.
jPlayer về cơ bản là một plugin jQuery, do đó chúng ta cũng cần tải xuống jQuery để nó hoạt động và tại thời điểm viết jQuery hiện đang ở phiên bản 1.8.2. Chúng tôi cũng cần một số biểu tượng cho GUI của trình phát đa phương tiện và lần này chúng tôi sẽ sử dụng FontAwesome để cung cấp các biểu tượng.
Sau đó, chúng tôi 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 một thư mục thích hợp. Sau đó liên kết jquery.js
và jquery.jplayer.min.js
vào tài liệu html, như sau.
<link rel="stylesheet" href="https://www.hongkiat.com/blog/web-audio-player/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 tôi cũng đã liên kết hai tệp CSS trong đó. Cái đầu tiên normalize.css
sẽ đặt lại hoặc chuẩn hóa các kiểu của trình duyệt, vì vậy trang web của chúng tôi sẽ được hiển thị nhất quán hơn trên các trình duyệt, trong khi trình duyệt thứ hai, style.css
là nơi chúng tôi đặt phong cách chính của chúng tôi.
Âm thanh
Để trình diễn trong hướng dẫn này, chúng tôi sẽ sử dụng âm thanh từ Kelli Anderson từ buổi giới thiệu của cô ấy tại TEDx Pheonix. Nó thực sự là một video, nhưng bạn chỉ có thể trích xuất âm thanh thông qua một trong các công cụ sau, Easy Youtube Downloader (FF Extension) hoặc là KeepVid.com.
Cấu trúc đánh dấu HTML
Bây giờ, đã đến lúc cấu trúc đánh dấu HTML cho trình phát âm thanh và dưới đây là đánh dấu HTML mà chúng ta cần. Điều quan trọng từ đánh dấu này là id=jquery_jplayer_1
thuộc tính được chỉ định 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 được gán trên 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. Tôi khuyê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 chúng tôi tạo kiểu 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="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-play" tabindex="1"></a></li> <li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-pause" tabindex="1"></a></li> <li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-mute" tabindex="1" title="mute"></a></li> <li><a href="https://www.hongkiat.com/blog/web-audio-player/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>
Nếu bạn xem kỹ cấu trúc HTML này, bạn sẽ thấy 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.
Chúng tôi đã đề cập đến chủ đề này trong bài đăng trước của chúng tôi: Hướng dẫn CSS3: Tạo nút Bật / Tắt kiểu dáng đẹp.
Kích hoạt Trình phát âm thanh
Tiếp theo, khi đánh dấu HTML đã được xóa, chúng ta chỉ cần kích hoạt trình phát bằng đoạn mã sau. Trong tập lệnh này, chúng tôi 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
. Các oga
định dạng sẽ mở rộng khả năng tương thích giữa các trình duyệt, đặ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 tôi 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 đánh dấu HTML bằng Firebug hoặc các Công cụ dành cho nhà phát triển khác, chúng tôi có thể tìm thấy <audio>
Phần tử HTML5 cũng được tạo.
Tạo kiểu cho người chơi
Trong phần này, chúng tôi 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 tôi sẽ bắt đầu bằng cách xác định họ phông chữ mới và xóa gạch dưới khỏi phần tử neo, như vậy.
@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 đề âm thanh
Chúng tôi 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 tôi 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 GUI
GUI trình phát âm thanh được chứa trong div
giao với jp-gui
lớp học. 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 tôi sẽ trông như thế nào. Chúng tôi áp dụng màu gradient cho chủ đề GUI và chúng tôi sử dụng số màu này cho màu bắt đầu #f34927
, và #dd3311
cho màu cuối. Ngoài ra, hãy đảm bảo rằng position
tài sản cho cái này div
được định nghĩa 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; }
Kiểm soát GUI
Phần điều khiển GUI chứa giao diệ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 tôi đặt font-family
tài sản để FontAwesomevà 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 Phát và Tạm dừng
Đối với phát và tạm dừng cũng như nút âm lượng, chúng tôi sẽ đặt position
đến absolute
, đó là lý do tại sao chúng tôi đặt .jp-gui
với họ hàng trước đây. 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); }
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 tôi cần. Bây giờ bạn có thể xem bản demo cũng như tải về nguồn từ các liên kết sau.
Bạn đang xem : Cách tạo trình phát âm thanh tùy chỉnh cho trang web của bạn
from Blog Hồng https://www.bloghong.com/2021/04/cach-tao-trinh-phat-am-thanh-tuy-chinh-cho-trang-web-cua-ban.html
Nhận xét
Đăng nhận xét