音乐播放器的实现（三）---进度条控制、播放、暂停、上（下）一曲、播放时间和总时间显示

传送门：（完整工程见第五章篇尾）

音乐播放器的实现（一）-- Audio Listener和Audio Source面板的介绍

音乐播放器的实现（二）---UI面板的制作

音乐播放器的实现（四）—— 歌曲列表、顺序播放、单曲循环、随机播放、自动下一曲

音乐播放器的实现（五）—— 音量的加减和静音

设计好面板，接下来就开始进行后台代码的编写了。

在Unity3D中的Project面板单机鼠标右键， Create—>C# Script，命名为Player，然后双击打开，进行编写。

核心代码讲解：

1.在Start方法中通过按钮名给各个按钮以及进度条加上监听，实现各个按钮的点击，每当拖拽或点击进度条（进度条的value值改变），音频就会播放到相应位置。

（2021.1.25更）

有一个兄弟提出这个方式播放时有滋滋啦啦的声音（在此感谢这位小哥[抱拳]）

他也给我分享了原因，经检测后证实确实有这样的Bug，所以我对代码做出了一些修改（下面代码均为修改过后的，请放心！）

void Start(){_instance = this;aus.Stop();                                                 //开始运行时不播放，点播放键才开始播放#region 注：该方式虽然可以直接达到拖动进度条就播放到进度条当前的音乐，但会产生滋滋啦啦的杂音，是因为进度条value变化，使之不断调用onValueChanged，从而让音乐的进度发生了变化，音乐前后颠倒，不断重叠////// 所以新建了个DragSlider脚本，挂在进度条上，来实现拖动播放的效果/////slid.onValueChanged.AddListener(delegate//{//    //加上之后，避免拖动进度条到最后不松手时报错//    if (slid.value == 1)//        return;//    //给进度条添加事件监听，每当拖动进度条，歌曲从相应的位置播放//    aus.time = slid.value * aus.clip.length;//});#endregionforeach (Transform go in buttons)                           //遍历所有的操作按钮{go.GetComponent<Button>().onClick.AddListener(delegate  //根据按钮名给按钮添加事件监听{switch (go.name){case "lastM":       //点击“上一曲”按钮LastMusic();break;case "pause":       //点击“暂停”按钮Pause();break;case "play":        //点击“播放”按钮Play();break;case "nextM":       //点击“下一曲”按钮NextMusic();break;}});}}

2.获取当前播放的音频的总时间，并显示在面板。

 void alltime()//歌曲总时间{//slid.value = 0;clipHour = (int)aus.clip.length / 3600;//时clipMinute = (int)(aus.clip.length - clipHour * 3600) / 60;//分clipSecond = (int)(aus.clip.length - clipHour * 3600 - clipMinute * 60);//秒//显示歌曲总时间allTime.text = string.Format("{0:D2}:{1:D2}:{2:D2}",clipHour, clipMinute, clipSecond);}

3.获取当前播放音频的已播放时间，并显示在面板，进度条跟着变化，表示进程。

void nowtime()//当前播放过的时间{currentHour = (int)aus.time / 3600; //时currentMinute = (int)(aus.time - currentHour * 3600) / 60;//分currentSecond = (int)(aus.time - currentHour * 3600 - currentMinute * 60);//秒//显示当前播放过的时间nowTime.text = string.Format("{0:D2}:{1:D2}:{2:D2} ",currentHour, currentMinute, currentSecond);//进度条变化//(之后更新版)如果当前没有拖拽进度条if(!DragSlider.isDrag)slid.value = aus.time / aus.clip.length;}

4.显示当前正在播放的音频

void nowMusic()                     //当前的音频{AudioClip clip = aus.clip;      //当前播放的音频string n = aus.clip.name;       //当前播放的音频的名字string[] na = n.Split('-');     //以“-”为分割点，把音频名分为若干部分//显示当前正在播放的歌曲的名字【歌曲名（默认字体，25号）+歌手名(默认字体，18号，红色)的形式】musicName.text = string.Format("<size=25>{0}</size>" + "\n<size=18><color=#FF0000FF>{1}</color></size>", na[0], na[1]);index = Array.IndexOf(auc, clip);//当前播放的音频在aus数组中的索引Slider();                        //当进度条走到最后时，播放下一曲}

完整代码：

using UnityEngine;
using UnityEngine.EventSystems;public class DragSlider : MonoBehaviour,IPointerDownHandler,IPointerUpHandler
{public static  bool isDrag;/// <summary>/// 鼠标按下/// </summary>/// <param name="eventData"></param>public void OnPointerDown(PointerEventData eventData){isDrag = true;}/// <summary>/// 鼠标抬起/// </summary>/// <param name="eventData"></param>public void OnPointerUp(PointerEventData eventData){OnMouseUp();isDrag = false;}void OnMouseUp(){//加上之后，避免拖动进度条到最后不松手时报错if (Player._instance.slid.value == 1){//进度条拉到最后，直接播放下一曲Player._instance.NextMusic();return;}//给进度条添加事件监听，每当拖动进度条，歌曲从相应的位置播放Player._instance.aus.time = Player._instance.slid.value * Player._instance.aus.clip.length;}
}

using System;
using UnityEngine;
using UnityEngine.UI;public class Player: MonoBehaviour {public Text musicName;          //显示歌曲的名字及歌手public Text nowTime;            //显示歌曲已播放的时间长度public Text allTime;            //显示当前歌曲的总时间长度public Slider slid;             //进度条public Transform buttons;       //按钮所在的集合体public AudioClip[] auc;         //存放歌曲的数组public AudioSource aus;         //音频播放器private int index;              //数组aus的索引private int currentHour, currentMinute, currentSecond;          //已播放的时间（时、分、秒）private int clipHour, clipMinute, clipSecond;                   //总时间（时、分、秒）public static Player _instance;void Start(){_instance = this;aus.Stop();                                                 //开始运行时不播放，点播放键才开始播放#region 注：该方式虽然可以直接达到拖动进度条就播放到进度条当前的音乐，但会产生滋滋啦啦的杂音，是因为进度条value变化，使之不断调用onValueChanged，从而让音乐的进度发生了变化，音乐前后颠倒，不断重叠////// 所以新建了个DragSlider脚本，挂在进度条上，来实现拖动播放的效果/////slid.onValueChanged.AddListener(delegate//{//    //加上之后，避免拖动进度条到最后不松手时报错//    if (slid.value == 1)//        return;//    //给进度条添加事件监听，每当拖动进度条，歌曲从相应的位置播放//    aus.time = slid.value * aus.clip.length;//});#endregionforeach (Transform go in buttons)                           //遍历所有的操作按钮{go.GetComponent<Button>().onClick.AddListener(delegate  //根据按钮名给按钮添加事件监听{switch (go.name){case "lastM":       //点击“上一曲”按钮LastMusic();break;case "pause":       //点击“暂停”按钮Pause();break;case "play":        //点击“播放”按钮                       Play();break;case "nextM":       //点击“下一曲”按钮NextMusic();break;}});}}void Update () {//当前播放过的时间nowtime();//当前正在播放的音频的总时间alltime();//当前正在播放的音乐nowMusic();}void nowtime()//当前播放过的时间{currentHour = (int)aus.time / 3600; //时currentMinute = (int)(aus.time - currentHour * 3600) / 60;//分currentSecond = (int)(aus.time - currentHour * 3600 - currentMinute * 60);//秒//显示当前播放过的时间nowTime.text = string.Format("{0:D2}:{1:D2}:{2:D2} ",currentHour, currentMinute, currentSecond);//进度条变化//(之后更新版)如果当前没有拖拽进度条if(!DragSlider.isDrag)slid.value = aus.time / aus.clip.length;}void alltime()//歌曲总时间{//slid.value = 0;clipHour = (int)aus.clip.length / 3600;//时clipMinute = (int)(aus.clip.length - clipHour * 3600) / 60;//分clipSecond = (int)(aus.clip.length - clipHour * 3600 - clipMinute * 60);//秒//显示歌曲总时间allTime.text = string.Format("{0:D2}:{1:D2}:{2:D2}",clipHour, clipMinute, clipSecond);}private void LastMusic()            //上一曲{index--;                        //索引减一//若索引等于-1，即当前播放的音频是aus数组列表的第一首，则上一首应为aus数组列表的最后一首if (index==-1)index = auc.Length - 1;aus.clip = auc[index];          //音频播放器的音频为aus数组中索引对应的音频slid.value = 0;                 //初始化进度条aus.time = 0;                   //初始化音乐的播放时间（从头开始播）aus.Play();                     //播放音频}private void Pause()                //暂停{aus.Pause();}private void Play()                 //播放{//如果当前正在播放，则返回if (aus.isPlaying)return;aus.Play();}public void NextMusic()            //下一曲{index++;                        //索引加一//若索引等于aus音频数组的长度，即当前播放的音频是最后一首，则下一首应为aus数组列表的第一首if (index == auc.Length)index = 0;aus.clip = auc[index];          //音频播放器的音频为aus数组中索引对应的音频slid.value = 0;                 //初始化进度条aus.time = 0;                   //初始化音乐的播放时间（从头开始播）aus.Play();                     //播放音频} void nowMusic()                     //当前的音频{AudioClip clip = aus.clip;      //当前播放的音频string n = aus.clip.name;       //当前播放的音频的名字string[] na = n.Split('-');     //以“-”为分割点，把音频名分为若干部分//显示当前正在播放的歌曲的名字【歌曲名（默认字体，25号）+歌手名(默认字体，18号，红色)的形式】musicName.text = string.Format("<size=25>{0}</size>" + "\n<size=18><color=#FF0000FF>{1}</color></size>", na[0], na[1]);index = Array.IndexOf(auc, clip);//当前播放的音频在aus数组中的索引Slider();                        //当进度条走到最后时，播放下一曲}void Slider()//当进度条走到最后时，播放下一曲{if (currentHour == clipHour && currentMinute == clipMinute && currentSecond == clipSecond){NextMusic();//下一曲}}
}

编辑完代码后保存，在unity面板中建一个空的GameObject,把代码挂上去，然后把对应的UI拖到相应的位置，具体如下图所示：

最终效果如下：

代码的备注写的也比较详细，欢迎评论区留言共同探讨。

音乐播放器的实现（三）---进度条控制、播放、暂停、上（下）一曲、播放时间和总时间显示相关推荐

阿里播放器踩坑记录进度条重构 video loadByUrl失效解决方案
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...
简单音乐播放器，可拖动进度条。完整代码demo
效果图: 可播放暂停继续播放,进度条可拖动,时间展示,声音调节完整代码(直接拿来用) <!DOCTYPE html> <html> <head> <meta ...
阿里web播放器微信浏览器打开进度条设置和时间获取
解决的问题: 1.阿里云的web播放器:移动端(安卓是红米手机和苹果11)在微信浏览器打开适用,pc端谷歌浏览器打开适用,其他没测. 2.全代码直接用,进度条没办法完全禁止拖动,只能快进就让他回到上一 ...
android ffmpeg 仿剪映播放器剪辑视频预览条快速精准抽帧
android ffmpeg 仿剪映播放器剪辑视频预览条快速精准抽帧由于本人想学习音视频相关的东西,所以找了剪映作为借鉴,通过仿照剪映的功能学习音视频相关的东西,所以有了这个项目暂时这个项目 ...
php 拖拽上传文件进度,在Vue中如何实现带进度条的文件拖动上传功能
这篇文章主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 1. 基本界面 content="width=devic ...
php flash上传进度条,PHP_PHP+FLASH实现上传文件进度条相关文件下载，PHP之所以很难实现上传进度条 - phpStudy...
PHP+FLASH实现上传文件进度条相关文件下载 PHP之所以很难实现上传进度条是因为在我们上传文件到服务器的时候,要等到文件全部送到服务器之后,才执行相应的php文件.在这之前,文件数据保存在一个 ...
（六）播放暂停、下一曲、上一曲功能实现
数据展示后需要实现播放功能,播放采用的是在后台开启一个service 这里先不写service的内容,只说基本的播放暂停和下一曲上一曲的逻辑具体实现方式如下: //播放/暂停 public bool ...
微信小程序——实现音乐播放器（上下切换歌曲、进度条拉动、暂停与继续播放）
小伙伴们你们有没有想过自己搞一个播放器,播上自己喜欢的歌单,那是多么的惬意啊~ 之前,小编遇到一个项目,语音导览的播放器.其实跟播放歌单一个道理. 但是一看微信开发文档里面的音频API又是那么多,我们 ...
Android使用高德地图实现轨迹播放和进度条控制
轨迹播放首先上视频效果(本来是要弄成GIF动态图的,但是手机将图片用微信发到电脑,电脑修改后缀名后还是不能展示) 在实现前需要先初始化和定义一些变量(大佬可以直接跳过),坐标列表和起点以及终点坐标根 ...

音乐播放器的实现（三）---进度条控制、播放、暂停、上（下）一曲、播放时间和总时间显示

音乐播放器的实现（三）---进度条控制、播放、暂停、上（下）一曲、播放时间和总时间显示

完整代码：

音乐播放器的实现（三）---进度条控制、播放、暂停、上（下）一曲、播放时间和总时间显示相关推荐

最新文章

热门文章