Chuyển đến nội dung chính

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



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

Bài đăng phổ biến từ blog này

Gói Backlink ProFile Giá 1 Triệu

http://www.kellyandbuzz.sakura.ne.jp/skc/index.php?option=com_k2&view=itemlist&task=user&id=419438 92 https://unsplash.com/@ariesvessel4 88 https://answers.informer.com/index.php?qa=user&qa_1=pritchardhood0914 85 https://www.goodreads.com/user/show/116026419-byrne 93 https://www.eater.com/users/fishermahone 84 https://www.transtats.bts.gov/exit.asp?url=https://www.bloghong.com/thiet-ke-web-bat-dong-san 78 https://gitlab.rc.uab.edu/silkdance8 74 https://www.racked.com/users/fishermahone 79 https://www.theverge.com/users/fishermahone 93 https://www.inventables.com/users/antonsenbriggs1922 64.46 http://www.feedbooks.com/user/6181956/profile 79 https://www.viki.com/users/fishermahoney73ktjit_502/about 85 http://gitlab.asap.um.maine.edu/silkmouse3 69 http://als.anits.edu.in/members/coastmexico51/ 55 https://www.fanfiction.net/u/13497564/ 87 https://www.cgc.edu/Academics/LearningCenter/Lists/Learning%20Center%20Evaluation/DispForm.aspx?ID=90348

Thiết kế website bất động sản mang lại hiệu quả cao

Rate this post Bất động sản luôn là một ngành kinh doanh nóng, lợi nhuận hấp dẫn, đòi hỏi người kinh doanh phải nhạy bén, có kế hoạch tìm kiếm đối tác, khách hàng cụ thể. Thiết kế website bất động sản là một trong những cách tìm kiếm đối tác tiềm năng được người kinh doanh sử dụng nhiều nhất hiện nay. Làm thế nào để thiết kế website mang lại hiệu quả kinh doanh? Chúng ta hãy tìm hiểu trong bài viết sau đây. Cập nhật tin tức cho khách hàng Thiết kế website bất động sản yêu cầu bạn là người tỉ mỉ, cẩn thận và dành thời gian duy trì hoạt động. Việc cập nhật tin tức khi thiết kế web thường bị nhà đầu tư bất động sản , nhà môi giới bất động sản bỏ qua. Chính vì thế mà hiệu quả mang lại của trang web thường không cao. Thiết kế web bạn không nên quá tập trung đến vấn đề bán nhà, môi giới bất động sản, giá cả, … mà cần chú ý đến các thông tin liên quan như: cách chọn nhà theo tuổi, theo mệnh, tình hình mua bán nhà đất, căn nhà như thế nào là đẹp,

10 sự thật thú vị cần biết về bất kỳ trang web nào

Là những người lướt Internet, chúng tôi – những người viết blog, nhà thiết kế, nhà phát triển hoặc những cá nhân tò mò – truy cập nhiều blog và trang web mỗi ngày. Điều thú vị là tôi trung bình lướt hơn 100 trang mỗi ngày trong vài ngày đứng đầu bảng xếp hạng với hơn 250 trang (bạn có muốn nhận thống kê tương tự cho lịch sử duyệt web của mình không? Tải xuống Vivaldi Browser) . Cùng với việc đọc nội dung trên web, chúng tôi cũng suy ngẫm về những câu hỏi thú vị như ai đã tạo ra trang web này, thứ hạng của nó là gì, nước xuất xứ là gì, như thế nào. một blog hoặc trang web kiếm được nhiều tiền , và nhiều hơn nữa. Ngoài việc kích thích sự tò mò của bạn, những câu hỏi này còn giúp bạn tin tưởng hoặc bỏ qua một dữ liệu nhất định. Ví dụ: nếu bạn đặt câu hỏi về sự thật trên một trang, bạn có thể kiểm tra thông tin chi tiết của trang web như chủ sở hữu tên miền và những người khác để xác nhận tính xác thực của nó. Có thể bạn thích thắc mắc mọi thứ và biết thêm về mọi thứ. Trong cả hai trườ