微信小程序：slider插件与音频的联动

最新推荐文章于 2024-06-24 10:39:38 发布
最新推荐文章于 2024-06-24 10:39:38 发布
阅读量5.9k 收藏 5
点赞数 1
文章标签： 微信小程序 slider组件 音频控制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41605091/article/details/80647269
版权
本文介绍如何在微信小程序中使用slider组件来控制音频的播放进度，详细阐述了.wxml和.js文件中的关键代码实现，展示了slider与音频播放的无缝配合。
摘要由CSDN通过智能技术生成

.wxml:

<!-- 播放区域 -->
< view class= 'play-area'>
<!-- <view class='play-line'> -->
< view class= 'play-line-time1'>{ {now_time?now_time:'00:00'}} </ view >
< slider class= 'play-line-slider' bindchange= "listenerSlider" block-size= "15" value= "{ {slider_value}}" activeColor= "#1a94e1" backgroundColor= "#d5d5d5" / >
< view class= 'play-line-time2'>{ {AudioDetail.audio_length}} </ view >
<!-- </view> -->
</ view >
最低0.47元/天 解锁文章
不爽的麻雀
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序音乐播放自定义组件
06-17
微信小程序音乐播放以及slider滑块控制自定义组件。解压缩放入项目即可使用，可以播放任意数量音频。拥有可拖动的滑块控制组件。时间显示。音频图片播放中动画。完善的播放暂停选择时间等等功能。
微信小程序-音乐播放器
07-08
微信小程序-音乐播放器DEMO，适用于初学者，帮助快速了解小程序
微信小程序的媒体组件
最新发布
2301_77661976的博客
06-24 414
bindtimeupdate: 播放进度变化时触发，触发频率约为 250ms 一次。bindtimeupdate: 播放进度变化时触发，触发频率约为 250ms 一次。initial-time: 视频开始播放的初始位置，单位为秒。bindended: 当音频播放至结束时触发。binderror: 音频播放发生错误时触发。bindended: 当视频播放至结束时触发。binderror: 视频播放发生错误时触发。bindpause: 当音频暂停时触发。bindpause: 当视频暂停时触发。
微信小程序音频，视频播放
m0_73481765的博客
09-12 888
同时，你还需要在对应的页面中编写相应的视图代码来展示播放时长、进度和控制按钮等。这样，你就可以在小程序中实现视频的播放/暂停功能，并且监听全屏状态的变化。微信小程序内置了控制视频播放、暂停和全屏功能的 API，可以通过调用相应的方法来实现。接下来，我们需要在对应的JavaScript文件中编写相应的逻辑代码来实现获取音频的播放时长和进度。方法用于响应滑动条的变化事件，获取滑动条的值，并更新数据中的当前播放时间。需要注意的是，根据实际需求，你需要替换代码中的。，我们可以更新数据中的总时长和当前播放时间。
微信小程序录音功能实现
undefined_ZF的博客
10-21 3124
首先我们要做的就是长按录音功能，顺带做了个播放录音带进度条功能，效果图及代码如下： 首先我们要做的效果图就是上图这样，下面就贴代码吧。 wxml: <view catch:longpress="handleRecordStart" catch:touchmove="handleTouchMove" catch:touchend="handleRecordStop" class="...
小程序基本命令
aiven1637的博客
10-30 3301
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序点播插件_微信小程序：slider插件与音频的联动
weixin_29230773的博客
01-14 331
.wxml: {{now_time?now_time:'00:00'}} {{AudioDetail.audio_length}} .js:const innerAudioContext = wx.createInnerAudioContext();//创建音频容器Page({ /*** 页面的初始数据...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
u012421719的博客
10-24 9981
本文长期更新
初识微信小程序
jiuchabi7492的博客
02-21 1328
文章目录2.初识微信小程序微信小程序：3.创建小程序 注册小程序账户 小程序工具功能介绍 以及小程序的目录结构分析4.小程序MINA框架介绍 wxml wxss pages逻辑层js 介绍 绑定数据、绑定属性、条件判断、循环渲染数据MINA框架介绍微信小程序与H5的不同之处：5.微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件6.微信小程序app....
微信小程序学习指南
weixin_30446197的博客
12-13 3314
作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 1：官方工具：http...
微信小程序多音频播放进度条问题
10-18
小程序的音频组件居然没有进度控制的功能，需要我们自己实现，下面脚本之家小编给大家带来了微信小程序多音频播放进度条问题，感兴趣的朋友一起看看吧
小程序InnerAudioContext设置问题记录
Hassan的小博客!
11-12 1479
小程序innerAudioContext问题记录
微信小程序—audio(音频)
Afanbaby的博客
12-19 1万+
今天来介绍一下微信小程序中音频播放控件–audio 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html 1.效果图如下，2.index.js中： //index.js //获取应用实例 const app = getApp() var isLoop = true; var isControls = true; P
微信小程序 - 超详音乐列表点击播放 mp3 wav 音乐文件，支持音频暂停播放 / 图标切换 / 流畅切换音频（暂停音乐后，会保留音乐 “进度“ 再次点击时继续播放）解决pause()暂停问题
王佳斌
10-22 4805
微信小程序实现列表点击播放音频，微信小程序实现音乐列表:播放、进度把控，微信小程序Audio列表音乐单独播放，音乐播放器，wx.createInnerAudioContext音频如何中断播放，微信小程序如何实现一个音乐列表，微信小程序怎么实现一个音乐播放列表，微信小程序如何播放mp3音频，微信小程序点击暂停音乐及保留进度，小程序音频列表切换音频，完美解决微信小程序音频innerAudioContext.pause()无法暂停，微信小程序wx.createInnerAudioContext()在安卓手机不能播
微信小程序slider自定义样式
小码的博客
10-24 6983
微信小程序slider自定义样式，这个样式不是真正控制在slider上的，而且用view层级覆盖来进行制作，是自己纯手工写的，不喜勿喷哦！ 这个可以自定义滑块大小和滑块阴影，设置长条高度等样式 ...
微信小程序——slider组件
Kinggitte的書棚
01-22 3533
slider组件是通常我们讲的滑动选择器，通常情况下，手机操作滑动选择器远比直接进行数值输入的好。 以下是代码 a.js changeSize:function(e){ this.data.icon.size = e.detail.value; this.setData(this.data); }, changeOpacity:function(e){ this.data.ico
微信小程序 —— 自定义带进度条的音频播放控件audio
热门推荐
Wu_shuxuan的博客
10-19 2万+
在使用微信小程序的音频控件（audio）的时候发现居然控件中竟然没有播放进度条。例如： 而微信小程序自带的音频空间（audio）光秃秃的: 所以我就想了个办法，做了一个动态的音频进度条，像这样音乐进行到百分之几，进度条走到百分之几： -wxml <audio bindtimeupdate="MusicStart" bindended="MusicEnd" wx:for="{{MusicList}}"
微信小程序添加音乐组件
江咏之
08-05 6472
audio音频组件 简单示例 wxml <audio src="/assets/img/许嵩 - 有何不可.mp3" loop="true" controls="true" name="有何不可" author="许嵩" poster="/assets/img/许嵩.png"></audio> 效果 官方示例 wxml <!-- audio.wxml --> <audio poster="{{poster}}" name="{{name}}" author="
微信小程序双向slider加背景图展示
05-12
可以使用微信小程序的 `slider` 组件和 `image` 组件来实现双向 slider 加背景图展示的效果。 首先，需要在 `wxml` 文件中添加 `slider` 和 `image` 组件，代码如下： ```html <view class="container"> <image class="background" src="{{backgroundUrl}}"></image> <slider class="slider" value="{{value1}}" min="{{min}}" max="{{max}}" bindchange="onChange"></slider> <slider class="slider" value="{{value2}}" min="{{min}}" max="{{max}}" bindchange="onChange"></slider> </view> ``` 其中 `background` 类设置背景图的样式，`slider` 类设置 slider 的样式。 然后，在 `js` 文件中定义 `data`，并在 `onLoad` 函数中设置背景图： ```javascript Page({ data: { backgroundUrl: '/images/background.jpg', value1: 20, value2: 80, min: 0, max: 100, }, onLoad: function () { wx.getImageInfo({ src: this.data.backgroundUrl, success: (res) => { this.setData({ backgroundWidth: res.width, backgroundHeight: res.height, }) }, }) }, onChange: function (event) { const { value } = event.detail const { dataset } = event.currentTarget const { index } = dataset if (index === '1') { this.setData({ value1: value, }) } else { this.setData({ value2: value, }) } }, }) ``` 在 `onChange` 函数中，通过 `dataset` 获取 slider 的索引，然后根据索引更新对应的 `value`。 最后，在 `wxss` 文件中设置样式： ```css .container { position: relative; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .slider { position: absolute; width: 80%; left: 10%; z-index: 1; } ``` 其中，`background` 样式设置背景图的样式，`slider` 样式设置 slider 的样式，并通过 `z-index` 属性设置层级关系，保证 slider 在背景图上方。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值