微信小程序实现类似微信点击语音播放效果

 更新时间:2019-07-08 22:00:22   作者:佚名   我要评论(0)

本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下

根据开发的需求,先理清一下思路,点击语音播

本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下

根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等;
小程序对于audio的组件的一些api方法已经不支持了,详情可以参看:微信小程序audio组件文档

嗯嗯,这下子,该怎么办呢?

就如上面提到,小程序1.60版本后,给开发者提供了这个wx.createInnerAudioContext()api…具体使用可以看文档;

好的,现在该上代码了!

-wxml结构:

<block wx:for="{{audioArr}}" wx:key="content" wx:for-item="v" wx:for-index="key">
 <view class='output-audio'>

 <!-- 默认状态 -->
 <view class='audio' wx:if="{{v.bl==false}}" bindtap='audioPlay' data-key="{{key}}" data-id="{{v.id}}" data-bl="{{v.bl}}">
  <image class='ico' src='https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/yuyin-ico.png' />
  <label class='time'>{{v.time}}</label>
 </view>

 <!-- 当前正在播放状态 -->
 <view class='audio' wx:if="{{v.bl==true}}" bindtap='audioStop' data-key="{{key}}" data-id="{{v.id}}" data-bl="{{v.bl}}">
  <image class='ico' src='https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/yuyin-gif.gif' />
  <label class='time'>{{v.time}}</label>
 </view>

 </view>
</block>

-wxss样式:

page{ background: #f0f0f0;}
.output-audio{ width: 150rpx; margin: 30rpx; }
.output-audio .audio{ padding: 20rpx; border-radius: 10rpx;background-color: #fff;
border: 1px solid #f0f0f0; overflow: hidden; }
.output-audio .audio .ico{ width: 26rpx; height: 30rpx; float: left;}
.output-audio .audio .time{ float: right; font-size: 24rpx;}

-js方法:

// pages/audio/audio.js

//创建audio控件
const myaudio = wx.createInnerAudioContext(); 

Page({

 /**
 * 页面的初始数据
 */
 data: {

 //音频列表
 audioArr: [
  {
  id: '000',
  src: 'https://s320.xiami.net/928/19928/1882512413/1772277226_1513175794617.mp3?ccode=xiami_web_web&expire=86400&duration=182&psid=485902a766977ecaae347a4cc851e8da&ups_client_netip=113.70.219.174&ups_ts=1551680441&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1772277226&fn=1772277226_1513175794617.mp3&vkey=Bac0e9fde3983f090cef0a37e1cb73ef7',
  time: '30s',
  bl: false
  },
  {
  id: '001',
  src: 'https://s128.xiami.net/764/33764/2104642547/1810384080_1551417116476_5598.mp3?ccode=xiami_web_web&expire=86400&duration=181&psid=6320a01db73a6fdb9632f5800fc93fe5&ups_client_netip=113.70.219.174&ups_ts=1551680537&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1810384080&fn=1810384080_1551417116476_5598.mp3&vkey=B54b264178201f6737c9bb5ff4bbce3d0',
  time: '50s',
  bl: false
  },
 ]
 },


 //音频播放 
 audioPlay: function (e) {
 var that = this,
  id = e.currentTarget.dataset.id,
  key = e.currentTarget.dataset.key,
  audioArr = that.data.audioArr,
  vidSrc = audioArr[key].src;
 myaudio.src = vidSrc;
 myaudio.autoplay = true;

 //切换显示状态
 for (var i = 0; i < audioArr.length; i++) {
  audioArr[i].bl = false;
 }
 audioArr[key].bl = true;
 
 myaudio.play();
 
 //开始监听
 myaudio.onPlay(() => {
  that.setData({
  audioArr: audioArr
  })
 })

 //结束监听
 myaudio.onEnded(() => {
  audioArr[key].bl = false;
  that.setData({
  audioArr: audioArr,
  })
 })

 },

 // 音频停止
 audioStop: function (e) {
 var that = this,
  key = e.currentTarget.dataset.key,
  audioArr = that.data.audioArr;
 //切换显示状态
 for (var i = 0; i < audioArr.length; i++) {
  audioArr[i].bl = false;
 }
 audioArr[key].bl = false;

 myaudio.stop();
 //停止监听
 myaudio.onStop(() => {
  audioArr[key].bl = false;
  that.setData({
  audioArr: audioArr,
  })
 })
 //结束监听
 myaudio.onEnded(() => {
  audioArr[key].bl = false;
  that.setData({
  audioArr: audioArr,
  })
 })
 }, 

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 
 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

完整代码可访问本人github

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

您可能感兴趣的文章:

  • 微信小程序和百度的语音识别接口详解

相关文章

  • 微信小程序实现类似微信点击语音播放效果

    微信小程序实现类似微信点击语音播放效果

    本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下 根据开发的需求,先理清一下思路,点击语音播
    2019-07-08
  • go时间/时间戳操作大全(小结)

    go时间/时间戳操作大全(小结)

    基本操作 01: 获取当前时间 dateTime := time.Now() fmt.Println(dateTime) 02: 获取年 月 日 时 分 秒 纳秒 year := time.Now().Year() //年 fmt.P
    2019-07-08
  • c++中创建.in文件的方法步骤

    c++中创建.in文件的方法步骤

    c++比赛中,总是要求使用文件输入输出的,那么.in/.out文件该怎样创建呢?怎样才能被软件调用呢? 打开任意文件夹,然后右击创建一个文本文档。 如图,点击
    2019-07-08
  • Python OpenCV 使用滑动条来调整函数参数的方法

    Python OpenCV 使用滑动条来调整函数参数的方法

    引言 在观察OpenCV中某个函数在不同参数的情况下,所得到的效果的时候,我之前是改一次参数运行一次,这样做起来操作麻烦,效率低下。为了更便捷的观察参数变
    2019-07-08
  • python提取log文件内容并画出图表

    python提取log文件内容并画出图表

    之前在excel里面分析log数据,简直日了*了。 现在用python在处理日志数据. 主要涉及 matplotlib,open和循环的使用。 日志内容大致如下 2016-10-21 21:0
    2019-07-08
  • python字符串查找函数的用法详解

    python字符串查找函数的用法详解

    python字符串查找函数的使用 打开Python开发工具IDLE,新建‘findstr.py'文件,并写代码如下: s ='/ab/bx,.s' print (s.find('/x')) 注意find是匹配子字
    2019-07-08
  • python设计微型小说网站(基于Django+Bootstrap框架)

    python设计微型小说网站(基于Django+Bootstrap框架)

    一、项目背景: 为了回顾关于django的文件上传和分页功能,打算写一个微型的小说网站练练手。花了一个下午的时间,写了个小项目,发现其中其实遇到了许多问
    2019-07-08
  • python里运用私有属性和方法总结

    python里运用私有属性和方法总结

    如何在PYTHON里运用私有属性和方法 class File: def __init__(self, name): self.name = name self.code = "ABCDEF" file_A = File("f
    2019-07-08
  • Python参数类型以及常见的坑详解

    Python参数类型以及常见的坑详解

    导语 由于之前遇到过几次有关于参数类型的坑,以及经常容易把一些参数类型搞混淆,现在做一下有关参数类型的总结记录以及对之前踩坑经历的分析。 参数类型
    2019-07-08
  • 代码实例讲解python3的编码问题

    代码实例讲解python3的编码问题

    python3的编码问题。 打开python开发工具IDLE,新建‘codetest.py'文件,并写代码如下: import sys print (sys.getdefaultencoding()) F5运行程序,打
    2019-07-08

最新评论