• 欢迎访问大姚哥前端笔记
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

小程序简洁音频(录音)播放组件

小程序 dayaoge 1940次浏览

小程序1.6.0 版本开始,该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口。
这里我们用 wx.createInnerAudioContext 实现简单音频播放组件,带暂停和音波跳动,剩余时间等功能。
如下图:
微信截图_20180703105039

定义组件

util.js中定义formatSeconds将秒数转为 00:00格式;

const formatSeconds = (s) => {
    let str = ""
    if(s>0){
        const minutes = Math.floor(s / 60);
        const seconds = Math.floor(s - minutes * 60);
        let m_str = minutes < 10 ? "0" + minutes : minutes;
        let s_str = seconds < 10 ? "0" + seconds : seconds;
        str = m_str + ":" + s_str + "\"";
    }
    return str;
}

module.exports = {
    formatSeconds: formatSeconds
}

小程序record.wxml

<!--components/record/record.wxml-->
<view class="record_box">
    <view bindtap='playRecord' class='record_btns'>
        <i wx:if="{{isPaused}}" class="iconfont mb-bofang"></i>
        <i wx:else class="iconfont mb-zanting"></i>
    </view> 
    <view class='record_wave {{isPaused?"":"active"}}'>
        <view class='wave1'></view>
        <view class='wave2'></view>
        <view class='wave3'></view>
        <view class='wave4'></view>
        <view class='wave5'></view>
        <view class='wave6'></view>
        <view class='wave7'></view>
        <view class='wave8'></view>
    </view>
    <view class='record_time'><text wx:if="{{lastTime}}">{{lastTime}}</text></view>
    <slot></slot>
</view>

小程序record.js

// 自定义音频播放器
const innerAudio = wx.createInnerAudioContext();
import { formatSeconds } from "./../../utils/util.js"
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        url: {            // 音频地址
            type: String,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
            value: ''     // 属性初始值(可选),如果未指定则会根据类型选择一个
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        isPaused: true, //是否暂停,true 暂停
        lastTime: "",//剩余时间
        currentTime: 0,//播放时间
        clearWaveInterval: null,//其他音频播放的时候暂停动画
    },

    /**
     * 组件的方法列表
     */
    methods: {
        //暂停
        pauseMuisc(){
            innerAudio.pause();
            this.setData({
                currentTime: innerAudio.currentTime
            })
            this.setData({
                isPaused: true
            })
            innerAudio.offEnded()
            innerAudio.offStop()
            innerAudio.offTimeUpdate();
        },
        playRecord() {
            innerAudio.src = this.properties.url; // 设置音乐的路径
            if (this.data.isPaused) {
                innerAudio.play();
                innerAudio.startTime = this.data.currentTime;
                this.setData({
                    isPaused: false
                })

                innerAudio.onEnded(() => {
                    innerAudio.offTimeUpdate();
                    this.setData({
                        isPaused: true,
                        currentTime: 0
                    })
                })
                innerAudio.onPlay(() => {
                    innerAudio.onTimeUpdate(() => {
                        setLastTime();
                        this.data.clearWaveInterval = setTimeout(() => {
                            stopWave();
                        }, 500)
                    })
                })

            } else {
                this.pauseMuisc();
            }

            const setLastTime = () => {
                let ct = innerAudio.currentTime;
                let all = innerAudio.duration;
                let last = all - ct;
                this.setData({
                    lastTime: formatSeconds(last)
                })
                clearTimeout(this.data.clearWaveInterval);
            }

            const stopWave = () => {
                console.log("stop")
                this.setData({
                    isPaused: true
                })
            }
        }
    }
})

组件样式 record.wxss

/* components/record/record.wxss */
@import "/static/css/iconfont.wxss";
.record_box{ display: flex; flex-wrap: nowrap; background: #fff; box-shadow: 0 5rpx 20rpx rgba(0,0,0,0.1); border-radius: 100rpx; height: 120rpx; padding:0 20rpx; align-items: center; justify-content: space-between; color:#ff7b00;}
.record_time{ width:120rpx; text-align: center; flex-grow: 0; font-size:30rpx; opacity: 0.8;}
.record_btns{ height: 100rpx; padding:0 30rpx; line-height: 100rpx;}
.record_wave{ display: flex; align-items: center;}
.record_wave view{ width:8rpx; height: 50rpx; transform:scaleY(0.2); background: #ff7b00; margin:0 6rpx; border-radius: 10rpx;}
.record_wave.active view{ animation: wave 0.8s infinite ease-in-out;}
.record_wave.active .wave1,.record_wave.active .wave5{
    animation-delay: 0s;
}
.record_wave.active .wave2,.record_wave.active .wave6{
    animation-delay: 0.2s;
}
.record_wave.active .wave3,.record_wave.active .wave7{
    animation-delay: 0.4s;
}
.record_wave.active .wave4,.record_wave.active .wave8{
    animation-delay: 0.6s;
}

@keyframes wave{
    0%{ transform:scaleY(0.2)}
    50%{ transform:scaleY(1);}
    0%{ transform:scaleY(0.2);}
}

这里使用了阿里字体图标库iconfont,如何在小程序中使用这里不介绍了。

组件使用

1.在使用的页面.json文件里添加引用组件;

{
    "usingComponents": {
        "record": "/components/record/record"
    }
}

2.页面wxml中使用

<record  url='{{recordurl}}' ></record>

至此,就大功告成了,承让。


小白公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明小程序简洁音频(录音)播放组件
喜欢 (4)