广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序使用slider实现音频进度条
  • 516
分享到

微信小程序使用slider实现音频进度条

2024-04-02 19:04:59 516人浏览 八月长安
摘要

众所周知哈,微信小程序里面的音频播放是没有进度条的,但最近有个项目呢,客户要求音频要有进度条控制,所以就想到了用slider来实现音频的进度条显示及控制 微信小程序的slider组件

众所周知哈,微信小程序里面的音频播放是没有进度条的,但最近有个项目呢,客户要求音频要有进度条控制,所以就想到了用slider来实现音频的进度条显示及控制

微信小程序的slider组件,效果如图:

长的跟进度条还是蛮相似的。

下面上代码 

slider是进度条,bindchange是slider的拖动事件,playtime 已播放时间,alltime 总时间

<view class='slider'>
    <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{{audioTime}}' />
</view>
<view class='time'>
    {{playtime}} / {{alltime}}
</view>

首先要初始化一个音频播放器,然后要获取音频的总时长duration,然后需要把这个时长转换成00:00这样的格式显示

var _self = this;
var innerAudiocontext = this.data.innerAudioContext;
innerAudioContext.onCanplay(() => {
   //初始化duration
  innerAudioContext.duration
  setTimeout(function () {
      //延时获取音频真正的duration
      var duration = innerAudioContext.duration;
      var min = parseInt(duration / 60);
      var sec = parseInt(duration % 60);
      if (min.toString().length == 1) {
        min = `0${min}`;
      }
      if (sec.toString().length == 1) {
        sec = `0${sec}`;
      }
      _self.setData({
         audioDuration: duration,
         alltime: `${min}:${sec}`
      });
   }, 1000)
})

下面就是开始播放的时候设置一个定时器,每一秒更新进度条的百分比,显示当前播放的时间,停止的时候把计时器停止就可以了,这样播放就完成了

//设置一个计步器
clearInterval(this.data.durationIntval);
    this.data.durationIntval = setInterval(function () {
      //当音频在播放时执行
      if (_self.data.playing) {
        //获取音频的播放时间,进度百分比
        var seek = _self.data.audiOSeek;
        var duration = innerAudioContext.duration;
        //当音频在播放时,每隔一秒音频播放时间+1,并计算分钟数与秒数
        var min = parseInt((seek + 1) / 60);
        var sec = parseInt((seek + 1) % 60);
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }        
        //当进度条完成,停止播放,并重设播放时间和进度条        
        var time = _self.data.audioTime;
        time = parseInt(100 * seek / duration);
        if (time >= 100) {
          innerAudioContext.stop();
          _self.setData({
            audioSeek: 0,
            audioTime: 0,
            audioDuration: duration,
            playing: 0,
            playtime: `00:00`,
          });
          return false;
        } else {
          //正常播放,更改进度信息,更改播放时间信息
          _self.setData({
            audioSeek: seek + 1,
            audioTime: time,
            audioDuration: duration,
            playtime: `${min}:${sec}`
          });
        }
      }
      console.log(_self.data);
    }, 1000);

下面就是要处理进度条的拖动事件,这个就比较简单了,就是获取进度条的百分比,转换成相应的播放时间,跳转到音频相应的时间进行播放就可以了

var _self = this;
    //获取进度条百分比
    var value = e.detail.value;
    _self.setData({
      audioTime: value
    });
    var duration = _self.data.audioDuration;
    //根据进度条百分比及歌曲总时间,计算拖动位置的时间
    value = parseInt(value * duration / 100);
    console.log(value);
    //更改状态
    _self.setData({
      audioSeek: value
    });
    var innerAudioContext = _self.data.innerAudioContext;
    //调用seek方法跳转音频时间
    innerAudioContext.seek(value);
    //播放音频
    innerAudioContext.play();

这样就完成收工了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序使用slider实现音频进度条

本文链接: https://www.lsjlt.com/news/153091.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序使用slider实现音频进度条
    众所周知哈,微信小程序里面的音频播放是没有进度条的,但最近有个项目呢,客户要求音频要有进度条控制,所以就想到了用slider来实现音频的进度条显示及控制 微信小程序的slider组件...
    99+
    2022-11-13
  • 微信小程序怎么使用slider实现音频进度条
    这篇文章主要介绍了微信小程序怎么使用slider实现音频进度条的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么使用slider实现音频进度条文章都会有所收获,下面我们一起来看看吧。微信小程序的sli...
    99+
    2023-07-02
  • 微信小程序进度条怎么实现
    这篇文章主要介绍“微信小程序进度条怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序进度条怎么实现”文章能帮助大家解决问题。progress进度条。属性名类型默认值说明percentF...
    99+
    2023-06-26
  • 微信小程序实现圆心进度条
    本文实例为大家分享了微信小程序实现圆心进度条的具体代码,供大家参考,具体内容如下 一、创建项目结构 打开微信开发者工具创建一个项目, 新建 与 pages 同级目录 componen...
    99+
    2022-11-13
  • 微信小程序实现环形进度条
    本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 index.wxss .circle {   position: absolute;   left:...
    99+
    2022-11-13
  • 微信小程序用canvas实现圆形进度条
    本文实例为大家分享了微信小程序用canvas实现圆形进度条的具体代码,供大家参考,具体内容如下 先放效果图,如下: 1. wxml文件代码如下 对于圆形进度条中间的文字,如果是简单...
    99+
    2022-11-13
  • 微信小程序实现播放音频
    本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 wxml: <!-- 语音 --> <view wx:if="{{content...
    99+
    2022-11-13
  • 微信小程序怎么实现环形进度条
    本篇内容主要讲解“微信小程序怎么实现环形进度条”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序怎么实现环形进度条”吧!index.wxss.circle { &nbs...
    99+
    2023-07-02
  • 微信小程序怎样实现下载进度条
    这篇文章主要介绍了微信小程序怎样实现下载进度条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果:progress进度条是微信小程序的组件,...
    99+
    2022-10-19
  • 微信小程序实现带滑块的进度条
    微信小程序项目需求,要实现一个带滑块并可左右滑动的进度条,看了小程序的文档,发现上面的progress组件无法满足需求,所以我自己写了一个,在这里总结一下。 一、效果图 二、实现逻...
    99+
    2022-11-13
  • 微信小程序怎么实现圆心进度条
    这篇文章主要介绍“微信小程序怎么实现圆心进度条”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序怎么实现圆心进度条”文章能帮助大家解决问题。一、创建项目结构打开微信开发者工具创建一个项目, 新...
    99+
    2023-07-02
  • 怎么使用微信小程序实现播放音频
    这篇“怎么使用微信小程序实现播放音频”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用微信小程序实现播放音频”文章吧。w...
    99+
    2023-07-02
  • 微信小程序中如何实现圆形进度条
    这篇文章主要为大家展示了“微信小程序中如何实现圆形进度条”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中如何实现圆形进度条”这篇文章吧。需求概要小程序...
    99+
    2022-10-19
  • 微信小程序如何实现实时圆形进度条
    这篇文章主要为大家展示了“微信小程序如何实现实时圆形进度条”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何实现实时圆形进度条”这篇文章吧。效果图如下...
    99+
    2022-10-19
  • 微信小程序实现音频录制功能
    微信小程序实现音频录制功能近年来,随着移动互联网的发展,微信小程序的普及越来越广泛。微信小程序作为一种轻量级、易于使用的应用,在帮助企业拓展市场和提升用户体验方面发挥着重要的作用。而在实现音频录制功能方面,微信小程序同样提供了简单易用的接口...
    99+
    2023-11-21
    微信小程序音频录制
  • 微信小程序实现播放音频功能
    本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 功能描述:一进页面就会播放音乐,点击暂停再次点击后可以开始播放,退出页面后播放停止。 HTML: &l...
    99+
    2022-11-13
  • 微信小程序怎么实现播放音频
    这篇文章主要介绍“微信小程序怎么实现播放音频”,在日常操作中,相信很多人在微信小程序怎么实现播放音频问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序怎么实现播放音频”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-19
  • 微信小程序怎么实现带滑块的进度条
    今天小编给大家分享一下微信小程序怎么实现带滑块的进度条的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、效果图二、实现逻辑功...
    99+
    2023-07-02
  • 微信小程序实现录音与音频播放功能
    目录1、录音1.1 案例2、音频播放控制2.1 案例小程序继承了微信强大的语音处理功能,提供了录音、音频播放控制和背景音乐等功能,它们的功能不同,但有相似性。 1、录音 小程序提供了...
    99+
    2022-11-13
  • 如何使用PHP实现微信小程序的音视频功能?
    如何使用PHP实现微信小程序的音视频功能?随着时代的发展,人们对于移动应用的需求也日益增长。微信小程序作为一种轻量级的应用开发模式,正逐渐受到用户的欢迎。而其中的音视频功能在社交和娱乐领域有着广泛的应用。本文将介绍如何使用PHP实现微信小程...
    99+
    2023-10-26
    PHP 微信小程序 音视频功能
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作