JS for simple audio playback

Now the results are as follows:

Because I don't need any other buttons on my side, I didn't write.

The data is provided by the backstage, and here's a little.

Background code

 PublicActionResult Musicplayer (intMusicid=0) {Musicplayermodel model=NewMusicplayermodel (); Switch(musicid) {default: Model. Musicname="believe-Animation "The Thief King""; Model. Coverimg="/content/music/believe-cover.jpg"; Model. FILEURL="/content/music/believe.mp3"; Model. Musicstartsecond=0; Model. Musicendsecond=227;  Break;  Case 1: Model. Musicname="Dream Pensive-animation "Fox Demon Little Matchmaker""; Model. Coverimg="/content/music/Dream Pensive-cover.jpg"; Model. FILEURL="/content/music/Dream pensive. mp3"; Model. Musicstartsecond=0; Model. Musicendsecond= -;  Break; }            returnView (model); }

Page code

@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><divclass="Img-wapper"> "@Model. Coverimg"/></div><div id="Player-wapper" class="Player-wapper"> <divclass="Cover-wapper"> "@Model. Coverimg"/> <divclass="Play"> <i></i> </div> </div> <divclass="Info-wapper"> <divclass="title"> @Model .musicname</div> <audio id="Audio-player"Src="@Model. FileUrl"Data-src="@Model. FileUrl"data-start="@Model. Musicstartsecond"Data-end="@Model. Musicendsecond"></audio> <divclass="audio-progress"> <span id="Start-time" class="Start-time">xx:xx</span> <div id="Progress" class="Progress"> <span id="Player-progress-bar" class="Bar"> <i></i> </span> </div> <span id="End-time" class="End-time">xx:xx</span> </div> </div></div>

Js

;$(function () {    var$playerWapper = $ ("#player-wapper"), $audioPlay= $ ("#audio-player"), Startsecond= $audioPlay. Data ("Start"),//default start time (seconds)Endsecond = $audioPlay. Data ("End"),//default end time (seconds)Playsecond = Startsecond,//time played (seconds)Surplussecond = Endsecond,//time remaining (seconds)Audoitimer =NULL;    Loadingtime ();    Playing (); //play jump by clicking on the progress bar$ (". Progress"). Click (function(e) {//gets the x-coordinate of the current mouse relative progress bar        varPositionx = E.pagex-$ ( This). Offset (). Left; varwidth = $ ( This). width (); //the x-coordinate/progress bar width of the progress bar gets the playback ratio        varProgess = (positionx/width). toFixed (2); $("#player-progress-bar"). CSS ("width"), progess); //Play Percentage * Total time get played timePlaysecond = parseint (progess *Endsecond); Surplussecond= Endsecond-Playsecond; //player Jump/Follow new play Time$audioPlay [0].currenttime =Playsecond;    Loadingtime (); })    //Play button click event$ (". Play"). Click (function () {        if($playerWapper. Hasclass ("playing") {Pause (); }        Else{Playing (); }    })    //Start/Resume playback    functionPlaying () {$playerWapper. addclass ("Playing"); $playerWapper. Removeclass ("Pause"); $audioPlay [0].play (); Audoitimer= SetInterval (function() {Playsecond++; Surplussecond--;            Loadingtime (); if(Surplussecond <= 0) {Playsecond=Startsecond; Surplussecond=Endsecond;            Pause (); }        }, 1000);//execute once every 1 seconds    }    //Pause Playback    functionPause () {$playerWapper. Removeclass ("Playing"); $playerWapper. addclass ("Pause");        Window.clearinterval (Audoitimer); $audioPlay [0].pause (); }    //load time and progress bar    functionLoadingtime () {$ ("#start-time"). HTML (Secondtotime (Playsecond)); $("#end-time"). HTML (Secondtotime (Surplussecond)); $("#player-progress-bar"). CSS ("width"), Percentage (Playsecond, Endsecond)); }    //Calculate Percentage    functionPercentage (Second1, second2) {return(Math.Round (SECOND1/SECOND2 * 10000)/100+ "%");//two-bit percent after decimal point    }    //time conversion, converting seconds to 00:00:00 format    functionSecondtotime (s) {varT; if(S >-1) {            varhour = Math.floor (s/3600); varmin = Math.floor (s/60)% 60; varSEC = 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; }        returnT; }})

JS for simple audio playback