Cách tạo trình phát âm thanh tùy chỉnh cho trang web của bạn

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

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.

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.jsjquery.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-mutejp-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">&#61515;</a></li>
          <li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-pause" tabindex="1">&#61516;</a></li>
          <li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-mute" tabindex="1" title="mute">&#61480;</a></li>
          <li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-unmute" tabindex="1" title="unmute">&#61478;</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 &#61515;, &#61516;, &#61480;&#61478;. 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, mp3oga. 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.

firebug-audio-html5

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

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *