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;
    }
})