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

原文地址:https://www.cnblogs.com/HJbk/p/8214142.html

时间: 2024-10-16 23:32:42

Js实现简单的音频播放的相关文章

简单mp3音频播放器的实现

本篇主要介绍使用Mediaplayer实现mp3简易音乐播放器,程序运行界面如下 下面是代码实现,因为代码比较简单,注释已经比较明确了. public class PlayActivity extends Activity implements OnClickListener { private EditText filenameText; // 音频播放的主要类 private MediaPlayer mediaPlayer; private String filename; // 记录播放位

ios简单的音频播放

由于之前没有做过音频类的项目, 所以这次自己写了一个音频的小Demo能实现暂停播放循环等功能. 直接看代码: // 我使用的AVAudioPlayer, 首先先导入库文件, 写上头文件,签上代理 #import "ViewController.h" #import <AVFoundation/AVFoundation.h> typedef NS_ENUM(NSInteger, playStatus){ // 这个枚举用来控制暂停和播放的切换 playStatusNo, pl

最简单的基于FFMPEG+SDL的音频播放器 ver2 (采用SDL2.0)

简介 之前做过一个简单的音频播放器:<最简单的基于FFMPEG+SDL的音频播放器>,采用的是SDL1.2.前两天刚把原先做的<最简单的基于FFMPEG+SDL的视频播放器>更新采用了SDL2.0,于是顺手也把音频播放器更新成为SDL2.0. SourceForge项目主页:https://sourceforge.net/projects/simplestffmpegaudioplayer/ 完整工程下载地址:http://download.csdn.net/detail/leix

IOS 音频播放

iOS音频播放 (一):概述 Audio Playback in iOS (Part 1) : Introduction 前言 从事音乐相关的app开发也已经有一段时日了,在这过程中app的播放器几经修改我也因此对于iOS下的音频播放实现有了一定的研究.写这个系列的博客目的一方面希望能够抛砖引玉,另一方面也是希望能帮助国内其他的iOS开发者和爱好者少走弯路(我自己就遇到了不少的坑=.=). 本篇为<iOS音频播放>系列的第一篇,主要将对iOS下实现音频播放的方法进行概述. 基础 先来简单了解一

关于iOS网络音频播放的一些详解

在日常的iOS开发中,我们通常会遇到媒体播放的问题,XCode中已经为我们提供了功能非常强大的AVFoundation框架和MediaPlayer框架.其中AVFoundation框架中的AVAudioPlayer主要用于播放本地音频,也可以播放网络音频,但是需要先将网络数据转化为data数据,用户体验较差,所有苹果公司提供了功能强大的AVPlayer用于播放网络音频(既流媒体),效果和可控性都比较好,现在就重点介绍下AVPlayer中网络音频的播放: 下边是一个简单的实例: OK,一个简单地音

ios开发——实用技术篇&amp;网络音频播放

网络音频播放 在日常的iOS开发中,我们通常会遇到媒体播放的问题,XCode中已经为我们提供了功能非常强大的AVFoundation框架和 MediaPlayer框架.其中AVFoundation框架中的AVAudioPlayer主要用于播放本地音频,也可以播放网络音频,但是需要先将 网络数据转化为data数据,用户体验较差,所有苹果公司提供了功能强大的AVPlayer用于播放网络音频(既流媒体),效果和可控性都比较好,现在就 重点介绍下AVPlayer中网络音频的播放: 下边是一个简单的实例:

最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture)

===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频播放演示样例2:GDI播放YUV, RGB 最简单的视音频播放演示样例3:Direct3D播放YUV,RGB(通过Surface) 最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture) 最简单的视音频播放演示样例5:OpenGL播放RGB/YUV 最简单的视音频播放演示样例

最简单的视音频播放示例9:SDL2播放PCM

本文记录SDL播放音频的技术.在这里使用的版本是SDL2.实际上SDL本身并不提供视音频播放的功能,它只是封装了视音频播放的底层API.在Windows平台下,SDL封装了Direct3D这类的API用于播放视频:封装了DirectSound这类的API用于播放音频.因为SDL的编写目的就是简化视音频播放的开发难度,所以使用SDL播放视频(YUV/RGB)和音频(PCM)数据非常的容易. SDL简介 SDL(Simple DirectMedia Layer)是一套开放源代码的跨平台多媒体开发库,

最简单的视音频播放示例6:OpenGL播放YUV420P(通过Texture,使用Shader)

本文记录OpenGL播放视频的技术.上一篇文章中,介绍了一种简单的使用OpenGL显示视频的方式.但是那还不是OpenGL显示视频技术的精髓.和Direct3D一样,OpenGL更好的显示视频的方式也是通过纹理(Texture).本文介绍OpenGL通过纹理的方式显示视频的技术. OpenGL中坐标和Direct3D坐标的不同 OpenGL中的纹理的坐标和Direct3D中的坐标是不一样的. 在Direct3D中.纹理坐标如下图所示.取值是0到1.坐标系原点在左上角. 物体表面坐标如下图所示.取