Js實現簡單的音頻播放

来源:https://www.cnblogs.com/HJbk/archive/2018/01/06/8214142.html
-Advertisement-
Play Games

現效果如下: 由於我這邊不需要其他按鈕,就沒寫 數據是由後臺提供,在這做了個小列子 後臺代碼 頁面代碼 Js ...


現效果如下:

 

 

由於我這邊不需要其他按鈕,就沒寫

數據是由後臺提供,在這做了個小列子

後臺代碼

public ActionResult MusicPlayer(int musicId=0) {
            MusicPlayerModel model = new MusicPlayerModel();
            switch (musicId)
            {
                default:
                    model.MusicName = "Believe-動畫《海賊王》";
                    model.CoverImg = "/Content/Music/Believe-cover.jpg";
                    model.FileUrl = "/Content/Music/Believe.mp3";
                    model.MusicStartSecond = 0;
                    model.MusicEndSecond = 227;
                    break;
                case 1:
                    model.MusicName = "夢回還-動畫《狐妖小紅娘》";
                    model.CoverImg = "/Content/Music/夢回還-cover.jpg";
                    model.FileUrl = "/Content/Music/夢回還.mp3";
                    model.MusicStartSecond = 0;
                    model.MusicEndSecond = 250;
                    break;
            }
            return View(model);
        }

頁面代碼

@using FunctionTest.Web.Areas.Function.Models;
@model MusicPlayerModel
@{
    ViewBag.Title = "MusicPlayer";
    Layout = "~/Areas/Function/Views/Shared/_FunctionLayout.cshtml";
}

<link href="~/Assets/Function/MusicPlayer/musicPlayer.css" rel="stylesheet" />
<script src="~/Assets/Function/MusicPlayer/musicPlayer.js"></script>

<div class="img-wapper">
    <img src="@Model.CoverImg" />
</div>
<div id="player-wapper" class="player-wapper">
    <div class="cover-wapper">
        <img src="@Model.CoverImg" />
        <div class="play">
            <i></i>
        </div>
    </div>
    <div class="info-wapper">
        <div class="title">@Model.MusicName</div>
        <audio id="audio-player" src="@Model.FileUrl" data-src="@Model.FileUrl" data-start="@Model.MusicStartSecond" data-end="@Model.MusicEndSecond" ></audio>
        <div class="audio-progress">
            <span id="start-time" class="start-time">00:00</span>
            <div id="progress" class="progress">
                <span id="player-progress-bar" class="bar">
                    <i></i>
                </span>
            </div>
            <span id="end-time" class="end-time">00:00</span>
        </div>
    </div>
</div>

Js

;$(function () {
    var $playerWapper = $("#player-wapper"),
        $audioPlay = $("#audio-player"),
        startSecond = $audioPlay.data("start"),//預設開始時間(秒)
        endSecond = $audioPlay.data("end"),//預設結束時間(秒)
        playSecond = startSecond,//已播放時間(秒)
        surplusSecond = endSecond,//剩餘時間(秒)
        audoiTimer = null;

    LoadingTime();
    Playing();

    //通過點擊進度條實現播放跳轉
    $(".progress").click(function (e) {
        //獲取當前滑鼠相對進度條的X坐標
        var positionX = e.pageX - $(this).offset().left; 
        var width = $(this).width();

        //進度條的X坐標/進度條寬度獲取播放占比
        var progess = (positionX / width).toFixed(2);
        $("#player-progress-bar").css("width", progess);

        //播放占比*總時間獲取已播放時間
        playSecond = parseInt(progess * endSecond);
        surplusSecond = endSecond - playSecond;

        //播放器跳轉/跟新播放時間
        $audioPlay[0].currentTime = playSecond;
        LoadingTime();
    })

    //播放按鈕點擊事件
    $(".play").click(function () {
        if ($playerWapper.hasClass("playing")) {
            Pause();
        }
        else {
            Playing();
        }
    })

    //開始/繼續播放
    function Playing() {
        $playerWapper.addClass("playing");
        $playerWapper.removeClass("pause");
        $audioPlay[0].play();
        audoiTimer = setInterval(function () {
            playSecond++;
            surplusSecond--;
            LoadingTime();
            if (surplusSecond <= 0) {
                playSecond = startSecond;
                surplusSecond = endSecond;
                Pause();
            }
        }, 1000); //每個1秒執行一次
    }

    //暫停播放
    function Pause() {
        $playerWapper.removeClass("playing");
        $playerWapper.addClass("pause");
        window.clearInterval(audoiTimer);
        $audioPlay[0].pause();
    }

    //載入時間和進度條
    function LoadingTime() {
        $("#start-time").html(secondToTime(playSecond));
        $("#end-time").html(secondToTime(surplusSecond));
        $("#player-progress-bar").css("width", Percentage(playSecond, endSecond));
    }

    //計算百分比
    function Percentage(second1, second2) {
        return (Math.round(second1 / second2 * 10000) / 100+ "%");// 小數點後兩位百分比

    }

    //時間轉換,將秒轉為00:00:00格式
    function secondToTime(s) {
        var t;
        if (s > -1) {
            var hour = Math.floor(s / 3600);
            var min = Math.floor(s / 60) % 60;
            var sec = s % 60;
            if (hour < 10) {
                t = '0' + hour + ":";
            } else {
                t = hour + ":";
            }

            if (min < 10) { t += "0"; }
            t += min + ":";
            if (sec < 10) { t += "0"; }
            t += sec;
        }
        return t;
    }
})

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一直用C#編程,在日常字元串拼接中string.Format()一直是個很好用很常用的方法,不用自己+++,既影響開發效率也影響可讀性 然而在js中並沒有這樣的函數可供使用,so整理了一個js的字元串format函數供項目的日常使用 雖然並不是很完善也不能提升拼接效率,但是足夠滿足開發過程中的工作效 ...
  • 近期項目因為怕數據污染所以用到了js的對象複製 js里的對象都是繼承自object,是引用類型,所以無法通過=號複製 所以整理了一些常用的複製方法,如下 一、通過JSON序列化和反序列化創建新的對象 測試一下: 測試結果: 然而,這個方法並不能進行深度複製,對於function屬性並不能複製到。那麼 ...
  • 如果再這樣下去,每天寫代碼的時間會越來越短的。。。 還是不夠專註啊,不能帶手機去自習的原則不能改,否則就會死的很慘。。。。 今天就只是完成了homework4而已,而且還留了些問題沒有想出答案來。 這裡採坑了,之前看老師講課的視頻的時候,沒註意sort裡面是個匿名函數,不是一般的坑,而且裡面可以不放 ...
  • Vue.js是目前很火的一個前端框架,採用MVVM模式設計,它是以數據驅動和組件化的思想構建的。相比於Angular.js,Vue.js提供了更加簡潔、更易於理解的API,使得我們能夠快速地上手並使用,特別適合單頁應用的開發。 ...
  • 1.前言 光陰似箭,日月如梭。不得不感慨時間過得很快,2017差不多結束了,一下子我從事前端開發的時間已經兩年了。這兩年可以說是一波三折,回想這兩年的經歷,讓我忍不住了寫下了這篇文章,記錄自己在這兩年經歷的種種種種。這篇文章,打算當做自己的一個經歷記錄,而對於看這篇文章的你,希望你們能從我的經歷裡面 ...
  • <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.Random"%> <%@ page import="java.io.O ...
  • package cn.itcast.bos.utils; import java.util.Arrays; import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyin ...
  • 1.install一個npm包的時候,總是會報這個警告; 網上查資料知道,這個fsevents是mac下用的,windows忽略即可; 2.關於在main.js中引入less文件的問題, 就會報這個錯,說相關模塊沒有找到,這個問題,我在網上找了很多資料,然後我也都試了,都不好用,於是我的解決辦法就是 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...