audio自定義樣式，控制操作面板的暫停，播放，獲取音訊的時長，以及根據時長進行進度條展示

阿新 • • 發佈：2018-11-09

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>audio例項</title>
    <script src="./js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div class="btn-audio"><audio id="mp3Btn"><source src="./music1.mp3" type 
="audio/mpeg" /></audio></div>
    <div class="progress">
        <!--進度條-->
        <div class="loader-container"></div>

        <div class="controls">
            <span class="played-time">00:00</span>
            <span class="audio-time" id="audioTime" 
>0</span>
        </div>

    </div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        //播放完畢
        $('#mp3Btn').on('ended', function() {
            console.log("音訊已播放完成");
            $('.loader-container').css('width','100%');
            $('.btn-audio' 
).css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
        })
        //播放器控制
        var audio = document.getElementById('mp3Btn');
        audio.volume = .100;
        $('.btn-audio').click(function() {
            event.stopPropagation();//防止冒泡:阻止目標元素的事件冒泡到父級元素
            if(audio.paused){ //如果當前是暫停狀態
                $('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});
                audio.play(); //播放
                return;
            }else{//當前是播放狀態
                $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
                audio.pause(); //暫停
            }
        });
        //獲取時長
        //loadedmetadata事件為音訊/視訊檔案載入完資料後觸發
        // duration 獲取音訊的時長，單位為s
        // transTime為封裝好的一個函式，目的是將秒轉換為幾分幾秒的格式
        $('#mp3Btn').on("loadedmetadata",function () {
               // alert(audio.duration)
                $('#audioTime').text(transTime(this.duration));
        });
        //監聽音訊播放時間並更新進度條
        audio.addEventListener('timeupdate',updateProgress,false);
    })
    //轉換音訊時長分/秒顯示
    function transTime(time) {
        var duration = parseInt(time);
        var minute = parseInt(duration/60);
        var sec = duration%60+'';
        var isM0 = ':';
        if(minute == 0){
            minute = '00';
        }else if(minute < 10 ){
            minute = '0'+minute;
        }
        if(sec.length == 1){
            sec = '0'+sec;
        }
        return minute+isM0+sec
    }
    //更新進度條
    function updateProgress() {
        var audio =document.getElementsByTagName('audio')[0]; //js獲取的方式
        var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100);//當前時間/總長 再乘以一個100變成百分數
        $('.loader-container').css('width', value * 0.907 + '%');//0.907 ：進度條div的寬度除以背景img的寬度，如果他們倆的長度一樣，就直接value就可以。
        $('.played-time').html(transTime(audio.currentTime));
    }
</script>
<style type="text/css">
html,body{
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background:#2b2938;
}
.btn-audio{
    margin: 90px auto;
    width: 186px;
    height: 186px;
    background:url(images/voice_stop.png) no-repeat center bottom;
    background-size:cover;
}
.loader-container {
    height: 100%;
    /*進度條長度*/
    width: 0;
    background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d);
    background: -moz-linear-gradient(left,#f8dc4b,#d95a3d);
    background: -o-linear-gradient(left,#f8dc4b,#d95a3d);
    background: -ms-linear-gradient(left,#f8dc4b,#d95a3d);
    background: linear-gradient(left,#f8dc4b,#d95a3d);
    border-radius:7px;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
    animation: loader 1s linear;
}
.progress{
    width: 70%;
    height: 7px;
    border-radius:7px;
    margin-left: 15%;
    margin-top: 30%;
    background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
    background: -moz-linear-gradient(left,#e4e3e4,#e4e5e4);
    background: -o-linear-gradient(left,#e4e3e4,#e4e5e4);
    background: -ms-linear-gradient(left,#e4e3e4,#e4e5e4);
    background: linear-gradient(left,#e4e3e4,#e4e5e4);
}

.controls span{color: #b3b5b7; font-size: 12px; display: inline-block; width: 34px;}

</style>

audio自定義樣式，控制操作面板的暫停，播放，獲取音訊的時長，以及根據時長進行進度條展示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>audio例項</title> <script src="./js

H5 audio 音訊標籤自定義樣式修改以及新增播放控制事件

20181023 更新原來的程式碼拖動進度點只寫了mouse事件，手機端的話應該是touch事件。所有出現了有朋友說的無法拖動進度條的問題。現在更新的程式碼已經加上touch事件，即無論是手機模式瀏覽，還是PC模式瀏覽都可以拖動進度點來調節音訊播放進度。完整程式碼也已經放上碼雲，需要的

自己實現的資料表格控制元件（dataTable），支援自定義樣式和標題資料、ajax等各種自定義設定以及分頁自定義

一、前言也沒什麼好說的嘛，用了蠻多github上開源的能夠實現dataTable功能的表格外掛，不過都預設繫結樣式啊，資料格式也設定的比較死，所以忍不住自己實現了一個簡單的可自定義樣式和自定義資料返回格式的資料表格外掛，原生js是保留的，後面如果更新新版本的話會去除對jq

自定義樣式，使用瀏覽器閱讀epub格式的電子書

直接獲得 ans 更改替換 html delay lastindex files epub格式的電子式一般用專門的閱讀器打開，但是如果可以使用瀏覽器打開，就可以隨意更改css了，獲得極致的體驗效果。比如可以自定義字體、行間距、背景色、字體大小、縮進等等... 當然

自定義回撥控制OSG模型進行移動操作

1、新建vs控制檯專案，勾選空專案 2、新建.h檔案命名為osg.h，用來包含用到的OSG標頭檔案 #include <osgViewer/Viewer> #include <osgDB/ReadFile> #include <osgViewer/View

WPF TabIndex預設樣式修改：去掉預設虛線框、自定義樣式（Button控制元件為例）

去掉Tab選中預設虛線框 Tab鍵切換時，被選控制元件自動存在虛線框，有時候為了介面美觀，這個虛線框就顯得比較麻煩。廢話不多說，下面是方法。 <Window.Resources> <Style x:Key="MeyFocusVisual" TargetType="{

android自定義星級評分控制元件，可實現只顯示實心星星

話不多說，上圖近日app需求弄一個等級展示，看了下UI圖，只顯示實星（點亮的星星）.如圖但是網上關於星級評分的例子大多這樣也展示虛心星星通過自定義View package com.starsbar; import android.content.C

細說 Angular 的自定義表單控制元件（贊，實用)

我們在構建企業級應用時，通常會遇到各種各樣的定製化功能，因為每個企業都有自己獨特的流程、思維方式和行為習慣。有很多時候，軟體企業是不太理解這種情況，習慣性的會給出一個診斷，『你這麼做不對，按邏輯應該這樣這樣』。但企業往往不會接受這種說法，習慣的力量是強大的，我們一定要尊重

【轉】WPF自定義控制元件與樣式(5)-Calendar/DatePicker日期控制元件自定義樣式及擴充套件

一．前言　　申明：WPF自定義控制元件與樣式是一個系列文章，前後是有些關聯的，但大多是按照由簡到繁的順序逐步釋出的等。本文主要內容：日曆控制元件Calendar自定義樣式；日期控制元件DatePicker自定義樣式，及Label標籤、水印、清除日期功能擴充套件；二．Calend

【轉】WPF自定義控制元件與樣式(8)-ComboBox與自定義多選控制元件MultComboBox

一．前言　　申明：WPF自定義控制元件與樣式是一個系列文章，前後是有些關聯的，但大多是按照由簡到繁的順序逐步釋出的等。　　本文主要內容：下拉選擇控制元件ComboBox的自定義樣式及擴充套件；自定義多選控制元件MultiComboBox；二．下拉選擇控制元件ComboBox的自

【Android自定義View實戰】之自定義評價打分控制元件RatingBar，可以自定義星星大小和間距

在Android開發中，我們經常會用到對商家或者商品的評價，運用星星進行打分。然而在Android系統中自帶的打分控制元件，RatingBar特別不好用，間距和大小無法改變。所以，我就自定義了一個特別好用的打分控制元件。在專案中可以直接使用，特別簡

html檔案上傳控制元件file自定義樣式

問題： HTML自帶的file上傳按鈕因在各種瀏覽器裡顯示樣式不一、不易自定義樣式給我們帶來很大的麻煩。解決思路：將input[type=file]控制元件隱藏，使用一個input[type=text]和button組合作為file控制元件的替代（樣式自行定義），並將

CSS3:nth-child()偽類選擇器，奇偶數行自定義樣式first-child

Table表格奇偶數行定義樣式: CSS3的強大，讓人驚歎，人們在驚喜之餘，又不得不為其艱難的道路感到可惜：好的標準只有得到行業瀏覽器的良好支援才算得上“標準”。CSS3標準已提出數年，但是目前能實現她的瀏覽器並不多，雖然部分瀏覽器能實現部分規範，但這又有什麼用呢？面對

ant design (antd) Modal 自定義樣式，去除白色背景，邊框，關閉按鈕

想實現功能如下：這個Modal沒有頭，沒有確定什麼的。因為Modal元件不能自定義外邊框，所以把所有的屬性全都刪掉之後： <Modal title={null} visible={this.state.visible}

用Kotlin擼一個自定義字母索引控制元件，效能優化

之前App使用Kotlin重構之後，最大的感觸就是kotlin簡潔的語法以及擴充套件函式等特性極大的提升了我們編寫程式碼的速度。如果說Java是K、T開頭的普通火車的話，那Kotlin就是D、G開頭的動車高鐵了！嗯，相信我，去用一用吧，絕對很爽。好了，開

dialog自定義樣式，程式碼中動態改變位置及大小

dialog自定義的樣式屬性 <style name="wait_dialog_style" parent="@android:style/Theme.Dialog"> &l

input type=“range”滑塊自定義樣式，實現步驟詳解及實際應用

寫在前面：本文的主要內容包括：type="range"屬性介紹，修改range預設css樣式以及在js中的實際應用。本文面向前端小白，寫的不好之處，請多多見諒。文末有demo連結，可以自行復制到本地進行試驗。最終要實現的效果：其中包括一部分js程式碼

WPF TabIndex預設樣式修改：去掉預設虛線框、自定義樣式（Button控制元件為例）

去掉Tab選中預設虛線框 Tab鍵切換時，被選控制元件自動存在虛線框，有時候為了介面美觀，這個虛線框就顯得比較麻煩。廢話不多說，下面是方法。 <Window.Resources> <Style x:Key="MeyFocusVisual" Tar

JSP頁面使用富文字控制元件ckeditor自定義樣式

找到ckeditor目錄下的ckeditor.js，修改其中的內容，向裡面新增自己的設定 CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration

Spinner自定義樣式，下拉圖示

1、新建spinner_province_bg.xml <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape>

audio自定義樣式，控制操作面板的暫停，播放，獲取音訊的時長，以及根據時長進行進度條展示

相關推薦