微信小程序实现类似微信点击语音播放效果
(编辑：jimmy 日期: 2024/11/15 浏览：3 次 )
本文实例为大家分享了微信小程序类似平常微信语音聊天的效果，不会互相干扰播放状态，供大家参考，具体内容如下
根据开发的需求，先理清一下思路，点击语音播放与暂停/停止，切换下一个语音等；
小程序对于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"external nofollow" target="_blank" href="https://github.com/xiexikang/xcx-audio-play">github
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：微信小程序如何访问公众号文章