Js实现简单的音频播放

现效果如下：

由于我这边不需要其他按钮，就没写

数据是由后台提供，在这做了个小列子

后台代码

public ActionResult MusicPlayer(int musicId=) {

            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 = ;

                    model.MusicEndSecond = ;

                    break;

                case :

                    model.MusicName = "梦回还-动画《狐妖小红娘》";

                    model.CoverImg = "/Content/Music/梦回还-cover.jpg";

                    model.FileUrl = "/Content/Music/梦回还.mp3";

                    model.MusicStartSecond = ;

                    model.MusicEndSecond = ;

                    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">:</span>

            <div id="progress" class="progress">

                <span id="player-progress-bar" class="bar">

                    <i></i>

                </span>

            </div>

            <span id="end-time" class="end-time">:</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;

    }

})