先来个效果图韵下味:

需求:

  1. 音频的播放,暂停,中间按钮状态的变化,播放时实时更新播放进度;
  2. 前进15s,后退15s;
  3. 进度条拖动。

一开始想着这3个功能应该挺简单的。不就是播放,暂停,前进,后退么~呵~写的时候发现自己还是太年轻。当然,这跟自己的技术功底有关系。现在把我遇到的难点及要注意的点说一下~

  1. 需要设置一个名为seekPosition的全局变量,初始值为0。我们要在播放的时候实时记录播放的位置,存到该变量里,这是方便在前进15s 或 后退15s 时计算时间点。
  2. 前进15s时要判断剩余时间是否>15s,如果<15s,则返回到开始位置;
  3. 后退15s时要判断播放时间是否>15s,如果<15s,则返回到开始位置;
  4. 点击播放时,要先判断seekPisition是否>0,如果>0,则跳转到seekPosition的位置,并播放;
  5. 拖动时,要先让音频停止播放,拖动结束后,再播放音频。并且要计算拖动位置对应的时间。

完整代码:

wxml:

<view class=" audio-content">

  <image src="{{logo640x360}}" class="bg-blur"></image>
<view class="bg-gray"></view>
<view class="container-cover">
<view class="cover">
<image src="{{logo640x360}}" class="cover-image"></image>
<view class="cover-tip">词不达意.mp3</view> </view>
</view>
<view class="audio-inner row item-center">
<view class="audio-desc">{{currentProcess}}</view>
<view class="audio-progress-wrap">
<van-slider value="{{sliderValue}}" step="{{sliderStep}}" active-color="#09bb07" use-button-slot bind:change="onSliderChange" bind:drag="onSliderDrag">
<view class="slider-button" slot="button"></view>
</van-slider>
</view>
<view class="audio-desc">{{productDetail.duration}}</view>
</view> <!-- 播放器控制条 -->
<section class="speech-player js_control_bar">
<view class="player-bar row justify-center item-center">
<view class="backward js_audio_backward" title="后退15s">
<ss-icon name="back-15" size="32px" color="#fff" block="{{true}}" bind:click="backward" />
</view>
<view class="play" title="播放/暂停">
<view class="circle-loading" wx:if="{{loading}}"></view>
<ss-icon name="play-outline" size="50px" color="#fff" block="{{true}}" wx:if="{{pause}}" bind:click="audioPlay" />
<ss-icon name="pause-outline" size="50px" color="#fff" block="{{true}}" wx:if="{{playing}}" bind:click="audioPause" />
</view>
<view class="forward js_audio_forward" title="前进15s">
<ss-icon name="forward-15" size="32px" color="#fff" block="{{true}}" bind:click="forward" />
</view>
</view>
</section>
</view>

这里面用到了有赞的小程序组件 icon组件 和 slider 组件。如果你要用的话把上面的 <ss-icon> 换成<van-icon>,并且需要自己找阿里矢量图标库查找对应的图标。

js:

// components/product/audio/index.js

let audioUrl = "",
seekPosition = 0;
const audioContext = wx.createInnerAudioContext(); Component({
options: {
multipleSlots: true,
addGlobalClass: true
}, /**
* 组件的属性列表
*/
properties: {
productId: Number,
},
/**
* 组件的初始数据
*/
data: {
pause: true,
playing: false,
loading: false,
productDetail: {},
audioDuration: 0,
currentProcess: '00:00',
sliderStep:1
}, /**
* 组件的方法列表
*/
methods: {
//音频播放
audioPlay(e) {
const _this = this;
let audioDuration = _this.data.audioDuration;
if (audioUrl) {
if (seekPosition) {
//如果有指定位置,则跳转到指定位置
audioContext.seek(seekPosition);
}
audioContext.play();
_this.setData({
pause: false,
playing: true,
loading: false,
})
} else {
//getJSON是我自己封装的
ss.getJSON('获取音频如果需要发送请求,这里面放请求地址', {
放你自己的参数
}, res => {
audioUrl = res.t;
audioContext.src = audioUrl;
if (seekPosition) {
audioContext.seek(seekPosition);
}
audioContext.play();
audioContext.onPlay(() => {
console.log('onPlay')
}) audioContext.onWaiting(() => {
console.log('onWaiting')
_this.setData({
pause: false,
playing: false,
loading: true,
})
}) audioContext.onCanplay(() => {
console.log('onCanplay')
_this.setData({
pause: false,
playing: true,
loading: false
})
setTimeout(() => {
audioContext.duration
}, 500) _this.audioStatus();
}) audioContext.onError((res) => {
console.log(res.errMsg)
})
})
} }, //播放暂停
audioPause: function() {
const _this = this;
audioContext.pause();
_this.setData({
pause: true,
playing: false,
loading: false
})
}, //记录播放状态
audioStatus: function() {
const _this = this;
//音频播放进度更新事件
audioContext.onTimeUpdate(() => {
seekPosition = audioContext.currentTime;
_this.setData({
currentProcess: ss.formatSecToMin(audioContext.currentTime),
sliderValue: audioContext.currentTime / _this.data.audioDuration * 100,
})
})
//音频播放结束
audioContext.onEnded(() => {
seekPosition = 0;
_this.setData({
sliderValue: 0,
currentProcess: '00:00',
playing: false,
pause: true
})
})
}, //开始拖动
onSliderDrag(e) {
const _this = this;
if (_this.data.playing) {
_this.audioPause()
}
let sliderValue = e.detail.value;
seekPosition = _this.data.audioDuration / 100 * sliderValue;
_this.setData({
currentProcess: ss.formatSecToMin(seekPosition)
}) }, //拖动结束
onSliderChange(e) {
const _this = this;
_this.audioPlay()
}, //前进15s
forward() {
const _this = this,
audioDuration = _this.data.audioDuration;
let currentTime;
if (_this.data.playing) {
currentTime = audioContext.currentTime;
}
if (_this.data.pause) {
currentTime = seekPosition;
} if (audioDuration - currentTime > 15) {
seekPosition = currentTime + 15;
_this.setData({
sliderValue: seekPosition / audioDuration * 100,
currentProcess: ss.formatSecToMin(seekPosition)
});
} else {
seekPosition = audioDuration;
_this.setData({
sliderValue: 0,
currentProcess: '00:00'
});
}
if (audioUrl && _this.data.playing) {
audioContext.seek(seekPosition);
}
}, //后退15s
backward() {
const _this = this,
audioDuration = _this.data.audioDuration;
let currentTime;
if (_this.data.playing) {
currentTime = audioContext.currentTime;
}
if (_this.data.pause) {
currentTime = seekPosition;
} if (currentTime > 15) {
seekPosition = currentTime - 15;
} else {
seekPosition = 0;
}
_this.setData({
sliderValue: seekPosition / audioDuration * 100,
currentProcess: ss.formatSecToMin(seekPosition)
});
if (audioUrl && _this.data.playing) {
audioContext.seek(seekPosition);
}
}
}
})

大概就是这些了~有更好解决方案的欢迎留言哈~~

微信小程序——音频播放器的更多相关文章

  1. 微信小程序音频播放 InnerAudioContext 的用法

    今天项目上涉及到了微信小程序播放音频功能,所以今天跟着一些教程做了个简单的播放器 1.实现思路 刚开始想着有没有现成的组件可以直接用,找到了微信的媒体组件 audio,奈何看着 1.6.0版本开始,该 ...

  2. 微信小程序音乐播放器

    写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...

  3. 微信小程序 - 音频播放(1.2版本和1.2版本之后)

    不多说了,直接贴code // 1.2版本以后便不在维护 wx.getBackgroundAudioManager({ success:function(res){ var status =res.s ...

  4. 微信小程序音乐播放器组件

    wxml <image bindtap="click" src="{{isPlay?'/images/':'/images/'}}"/> JS Pa ...

  5. 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)

    自动发单,自动评价,自动评论,自动推广 微信小程序自运营器  微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...

  6. 微信小程序api拦截器

    微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...

  7. 微信小程序音频背景播放

    由于微信小程序官方将音频的样式固定死了,往往再工作中和UI设计师设计出来的样式不符,故一般都采用背景音频播放来实现自定义的UI样式的音频播放,即使用官网API提供的BackgroundAudioMan ...

  8. 微信小程序音乐播放

    最近在写一个艾美食艾音乐的微信小程序,其中有用到音乐播放的功能,基本播放切换功能已经实现,但是在反复切换歌曲.重新进入歌曲以及单曲循环.列表循环的测试过程中还是发生了bug,特此写一篇文章,捋一下思路 ...

  9. 微信小程序音频长度获取的问题

    小程序推荐使用wx.createInnerAudioContext()创建的innerAudioContext,我们也通过这个接口创建音频.音频的长度可以通过属性获取: 但是,给innerAudioC ...

随机推荐

  1. Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制

    思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...

  2. C++ 工程师养成 每日一题third (子数列排序)

    题目: 定义排序子序列为一个数组中一段连续的子序列,并且这段子序列是非递增或者非递减排序的.牛牛有一个长度为n的整数数组A,他现在有一个任务是把数组A分为若干段排序子序列,牛牛想知道他最少可以把这个数 ...

  3. linux安装 uwsgi 测试 test.py 不显示hello world 的解决办法

    一般部署项目到服务器,会安装uwsgi,但是很多教程在安装它的时候会让你测试一下安装好了没,于是就有很多像我一样懵逼的少年掉进一个坑里出不来,很久.很久... 那就是最后浏览器输入ip:8000端口后 ...

  4. 【数据结构】12.java源码关于ConcurrentHashMap

    目录 1.ConcurrentMap的内部结构 2.ConcurrentMap构造函数 3.元素新增策略4.元素删除5.元素修改和查找6.特殊操作7.扩容8.总结 1.ConcurrentMap内部结 ...

  5. Spring Boot 注解大全,真是太全了!

    一.注解(annotations)列表  @SpringBootApplication:包含了@ComponentScan.@Configuration和@EnableAutoConfiguratio ...

  6. Docker之数据卷(Data Volumes)操作

    目的: 前言 Docker宿主机和容器之间文件拷贝 数据卷 数据卷容器 前言 Docker 数据管理 在生产环境中使用 Docker ,往往需要对数据进行持久化,或者需要在多个容器之间进行 数据共享, ...

  7. laravel 自定义验证 Validator::extend

    laravel 自定义验证 $messages = [ 'name.integer' => '名字不能为整型', 'name.max' => '长度不能超过5', ]; public st ...

  8. 【题解】Luogu P5304 [GXOI/GZOI2019]旅行者

    原题传送门 题意:给你k个点,让你求两两最短路之间的最小值 我们考虑二进制拆分,使得每两个点都有机会分在不同的组\((A:0,B:1)\)中,从源点\(S\)向\(A/B\)中的点连边权为0的边,从\ ...

  9. The five Day 水平翻转图像,然后反转图像并返回结果

    """ 给定一个二进制矩阵 A,我们想先水平翻转图像,然后反转图像并返回结果. 水平翻转图片就是将图片的每一行都进行翻转,即逆序.例如,水平翻转 [1, 1, 0] 的结 ...

  10. 《JAVA高并发编程详解》-Thread start方法的源码

    Thread start方法的源码: