Js enables simple audio playback and js audio playback

Js enables simple audio playback and js audio playback

The effect is as follows:

 

 

Because I don't need any other buttons, I didn't write it.

The data is provided by the backend and a small column is created here.

Background code

Public ActionResult MusicPlayer (int musicId = 0) {MusicPlayerModel model = new MusicPlayerModel (); switch (musicId) {default: model. musicName = "Believe-animated one piece"; model. coverImg = "/Content/Music/Believe-cover.jpg"; model. fileUrl = "/Content/Music/Believe.mp3"; model. musicStartSecond = 0; model. musicEndSecond = 227; break; case 1: model. musicName = "menghui-Animation" fox demon little matchmaker "; model. coverImg = "/Content/Music/dream return -cover.jpg"; model. fileUrl = "/Content/Music/Dream recovery"; model. musicStartSecond = 0; model. musicEndSecond = 250; break;} return View (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><div class="img-wapper">    </div><div id="player-wapper" class="player-wapper">    <div class="cover-wapper">                <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"), // default start time (seconds) endSecond = $ audioPlay. data ("end"), // The default end Time (seconds) playSecond = startSecond, // The played time (seconds) surplusSecond = endSecond, // The remaining time (seconds) audoiTimer = null; LoadingTime (); Playing (); // you can click the progress bar to redirect the video to $ (". progress "). click (function (e) {// obtain the X coordinate var positionX = e. pageX-$ (this ). offset (). left; var width = $ (this ). width (); // X coordinate of the progress bar/width of the progress bar to obtain the playback proportion var progess = (positionX/width ). toFixed (2); $ ("# player-progress-bar" width .css ("width", progess ); // playSecond = parseInt (progess * endSecond); surplusSecond = endSecond-playSecond; // player jump/New playback time $ audioPlay [0]. currentTime = playSecond; LoadingTime () ;}) // Click Event $ (". play "). click (function () {if ($ playerWapper. hasClass ("playing") {Pause () ;}else {Playing () ;}) // start/continue 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); // execute each 1 second} // Pause the playback function Pause () {$ playerWapper. removeClass ("playing"); $ playerWapper. addClass ("pause"); window. clearInterval (audoiTimer); $ audioPlay [0]. pause () ;}// the loading time and progress bar function LoadingTime () {$ ("# start-time" ).html (secondToTime (playSecond )); $ ("# end-time" ).html (secondToTime (surplusSecond); $ ("# player-progress-bar" ..css ("width", Percentage (playSecond, endSecond);} // calculate the Percentage function Percentage (second1, second2) {return (Math. round (second1/second2*10000)/100 + "%"); // converts the percentage of two digits after the decimal point} // converts the second to the 00:00:00 format 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 ;}})