audio實現自定義音頻播放器

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/05/12417052.html
-Advertisement-
Play Games

效果圖 audio.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>audio</title> <style> *{margin:0;padding:0;list-style: none;} /*設 ...


效果圖

audio.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        *{margin:0;padding:0;list-style: none;}
        /*設置margin時不要忘了考慮border*/
        .outerNode{width:505px;height:406px;position: absolute;top:50%;margin-top:-204px;left:50%;margin-left:-253.5px;border:1px solid #a6a18d;border-radius:8px;box-shadow:0 0 16px #bdbab1;}
        .innerNode{width:504px;height:405px;border-top:1px solid #e0d0ba;border-left:1px solid #ceccbf;overflow:hidden;border-radius:8px;}

        /*封面圖*/
        .topNode{width:100%;height:198px;border-bottom:1px solid #787463;background:url(music/pic/fmt01.jpg) center center;background-size:cover;transition:all .7s;position: relative;}
        .musicName{position: absolute;left:2px;bottom:5px;color:#fff;}

        /*進度條*/
        .lineNode{width:100%;height:46px;border-top:1px solid #f9f7ee;border-bottom:1px solid #a29d8a;background:url(musicimage/linebg.jpg) repeat-x;}
        .progressNode{width:440px;height:18px;margin:13px 0 0 28px;background:url(musicimage/progressbg.jpg) repeat-x;position: relative;}
        .progressLeft{width:7px;height:100%;position: absolute;left:0;background:url(musicimage/leftNode.jpg);}
        .progressRight{width:7px;height:100%;position: absolute;right:0;background:url(musicimage/rightNode.jpg);}
        .trueLine{position: absolute;top:2px;left:3px;width:0%;height:12px;background:url(musicimage/green_bg.png) repeat-x;border-radius: 6px;border-right:1px solid #787463;}

        /*控制項*/
        .bottomNode{width:100%;height:157px;border-bottom:1px solid #7e7670;background:url(musicimage/bottombg.jpg);position: relative;}
        /*定位時記得考慮減去元素陰影的寬高*/
        .lastNode{width:75px;height:74px;position: absolute;top:39px;left:118px;background:url(musicimage/lastBg.png);cursor:pointer;}
        .playNode{width:95px;height:94px;position: absolute;top:29px;left:202px;background:url(musicimage/playNode.png);cursor:pointer;}
        .nextNode{width:75px;height:74px;position: absolute;top:39px;left:306px;background:url(musicimage/rightBg.png);cursor:pointer;}
        .volumeNode{width:37px;height:32px;position: absolute;top:58px;right:43px;background:url(musicimage/volume.png);cursor:pointer;}
        .no_volume{width:37px;height:32px;position: absolute;top:58px;right:43px;background:url(musicimage/no_volume.png);cursor:pointer;}
    </style>
</head>
<body>
    <div class="outerNode">
        <div class="innerNode">
            <!-- 封面圖 -->
            <div class="topNode">
                <div class="musicName"></div>
            </div>
            <!-- 進度條 -->
            <div class="lineNode">
                <div class="progressNode">
                    <div class="progressLeft"></div>
                    <div class="progressRight"></div>
                    <!-- 真正的進度條 -->
                    <div class="trueLine"></div>
                </div>
            </div>
            <!-- 控制項元素 -->
            <div class="bottomNode">
                <div class="lastNode"></div>
                <div class="playNode"></div>
                <div class="nextNode"></div>
                <div class="volumeNode"></div>
            </div>
        </div>
    </div>

    <script>
        var audio=new Audio();
        
        // 播放暫停
            var playNode=document.querySelector(".playNode");
            var isPlay=false;
            playNode.onclick=function(){            
                if(isPlay===false){
                    audio.play();
                }else{
                    audio.pause();
                }
                isPlay=!isPlay;
            }

        // 是否靜音
            var volumeNode=document.querySelector(".volumeNode");
            var isMuted=false;
            volumeNode.onclick=function(){    
                isMuted=!isMuted;

                if(isMuted===false){
                    audio.volume=1;
                    this.className="volumeNode";
                }else{
                    audio.volume=0;
                    this.className="no_volume";
                }
                
            }

        // 音樂播放，進度條移動
            var trueLine=document.querySelector(".trueLine");
            audio.addEventListener("timeupdate",function(){
                trueLine.style.width=audio.currentTime/audio.duration*100+"%";
            })

        //手動控制進度條
            var progressNode=document.querySelector(".progressNode");
            var outerNode=document.querySelector(".outerNode");
            progressNode.onclick=function(e){
                var ev=e||event;
                var percent=(ev.clientX-(this.offsetLeft+outerNode.offsetLeft))/this.offsetWidth;
                audio.currentTime=audio.duration*percent;
                trueLine.style.width=percent*100+"%";
            }

        //上下首歌切換
            let allMusic=[{
                "musicSrc":"music/mus/AcousticGuitar1.mp3",
                "musicPic":"music/pic/fmt01.jpg",
                "musicName":"AcousticGuitar1"
            },{
                "musicSrc":"music/mus/AmazingGrace.mp3",
                "musicPic":"music/pic/fmt02.png",
                "musicName":"AmazingGrace"
            },{
                "musicSrc":"music/mus/FeelsGood2B.mp3",
                "musicPic":"music/pic/fmt03.jpg",
                "musicName":"FeelsGood2B"
            },{
                "musicSrc":"music/mus/FunBusyIntro.mp3",
                "musicPic":"music/pic/fmt04.jpg",
                "musicName":"FunBusyIntro"
            },{
                "musicSrc":"music/mus/GreenDaze.mp3",
                "musicPic":"music/pic/fmt05.jpg",
                "musicName":"GreenDaze"
            },{
                "musicSrc":"music/mus/Limosine.mp3",
                "musicPic":"music/pic/fmt06.jpg",
                "musicName":"Limosine"
            }];
            var index=0;
            var topNode=document.querySelector(".topNode");
            var musicName=document.querySelector(".musicName");
            toggleMusic(index);

            var lastNode=document.querySelector(".lastNode");
            var nextNode=document.querySelector(".nextNode");
            lastNode.onclick=function(){
                index--;
                index=index<0?allMusic.length-1:index;
                toggleMusic(index);
            }
            nextNode.onclick=function(){
                index++;
                index=index>allMusic.length-1?0:index;
                toggleMusic(index);
            }
            function toggleMusic(index){
                audio.src=allMusic[index].musicSrc;                
                audio.currentTime
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 響應式網頁設計項目#3---Product Landing Page----電商企業---伯庫電玩的塞爾達促銷頁面
    響應式網頁設計項目#3 Product Landing Page 電商企業，伯庫電玩的塞爾達促銷頁面 https://codepen.io/yiyunpan// #技術堆棧 1. 使用HTML、JavaScript和CSS完成。這裡是純CSS做的 #內容 1. 使用了H5 語義化的標簽 2. 重點使 ...
  • css排版常用樣式、三種不同html類型、css佈局盒模型介紹
    通過字體、字型大小、顏色、粗體、斜體、下劃線、刪除線、縮進、行間距、字元間距、對齊等css格式化要素實現網頁格式化排版，完成設計頁面效果;瞭解css佈局前提，需要掌握三種html不同標簽：塊狀元素、內聯元素（行級元素）、內聯塊狀元素，瞭解它們之間如何進行轉換；此外通過盒模型掌握css佈局，盒模型作為CS... ...
  • 快速掌握ES6 iterator Generator和async 之間的關係及其用法
    簡述了iterator,genteator和async的關係，和他們的基本原理以及用例。 ...
  • 高德地圖API，獲取和設置zoom級別和中心點
    雙擊可以調整高德地圖的級別 zoom 改變初始地圖的級別，zoom值越高，相當於滑鼠雙擊放大，內容越詳細，範圍越小 center 改變初始地圖的中心點，是一個數組，包含經緯度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • ES6 - 基礎學習(14): 函數的擴展
    函數參數的擴展 參數的預設值 // ES6之前，方法不能為參數直接指定預設值，只能通過參數判定的方式，為參數設置預設值。 function testFunc(x, y) { y = y || 'ES6'; console.log(x, y); } testFunc('Welcome to'); // ...
  • nodejs的xlsx模塊批量解析與導出excel數據表簡單使用
    想用nodejs的xlsx模板實現一個小功能，可以批量解析多個excel表，且能對其中的數據進行操作後，導出新表。 主要實現功能為將多個表，每個表多個sheet中的具體一列數據由加密變成解密，這裡主要是base64解密，需要解析的表放在import文件夾下，需要導出的表導出到output文件夾下，實 ...
  • 高德地圖API註冊使用教程簡答演示
    高德地圖API最大優勢：相容各種瀏覽器 1、註冊賬號並申請key （申請key能擁有更完整的功能，沒有key功能會受限） 進入高德地圖官網 https://lbs.amap.com/ 選擇web端-地圖js API 按步驟註冊開發者賬號，然後登陸 在應用管理-我的應用-創建應用-為web添加key ...
  • HTML5 視頻流行插件之video.js
    Video.js 是一個通用的在網頁上嵌入視頻播放器的 JS 庫，Video.js 自動檢測瀏覽器對 HTML5 的支持情況，如果不支持 HTML5 則自動使用 Flash 播放器。 （要支持ie低版本請下載5.4.3版 ）點擊進入官網 下載地址：http://www.jq22.com/jquery ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類