仿微信录音功能-(声波动画,上滑取消,超时截取,倒计时提醒)

序言

最近开发了一个语音输入控件,UI效果和微信的保持基本一直,除了颜色不一样。具体的功能如下

  • 动画效果和微信一样,都是通过声音的分贝大小驱动动画的大小
  • 如果声音过小,会进入监听模式,(一个小波浪从右到左移动)
  • 录音的气泡会随着时间不断变大
  • 最长支持60秒录音,在最后十秒会震动提示用户
  • 最后十秒会有倒计时,如果超时会自动截取
  • 支持转MP3格式
  • 使用简单,一个回调返回语音文件的地址和语音的时长

效果

这个demo 包含了录音,播放,权限申请的所有功能。建议自己下载试一试效果。

动画效果

在这里插入图片描述

监听模式(声音太小的时候自动进入)

在这里插入图片描述

其他功能

上滑取消和超时提醒

在这里插入图片描述

使用

布局文件中直接引用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/recyclerView"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <RelativeLayout
        android:id="@+id/layout_voice"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f5f5f5">

        <com.example.wxsoundrecord.voice.RecordButton
            android:id="@+id/btnAudio"
            android:paddingStart="140dp"
            android:paddingEnd="140dp"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:background="@drawable/dyps_shape_txt_bg"
            android:drawableStart="@drawable/dypc_ic_voice_press"
            android:gravity="center"
            android:text="按住说话"
            android:textSize="13dp"
            android:visibility="visible" />
    </RelativeLayout>
</LinearLayout>

java中 默认转换MP3 是自动开启的。

  		 RecordButton recordButton = findViewById(R.id.btnAudio);
        recordButton.setUseMP3(true);//使用mp3格式
        recordButton.setOnFinishedRecordListener(new RecordButton.OnFinishedRecordListener() {
            @Override
            public void onFinishedRecord(String audioPath, int time) {
                VoiceMsg msg = new VoiceMsg(audioPath, time, System.currentTimeMillis());
                voiceMsgList.add(msg);
                adapter.notifyDataSetChanged();
                recyclerView.scrollToPosition(voiceMsgList.size() - 1);
            }
        });

感谢

wav 转 mp3 使用的是下面这个库

AndroidAudioConverter

需要在Application中初始化

public class MyApp  extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        //wav转mp3工具
        AndroidAudioConverter.load(this, new ILoadCallback() {
            @Override
            public void onSuccess() {
                // Great!
            }
            @Override
            public void onFailure(Exception error) {
                // FFmpeg is not supported by device
            }
        });
    }

实现

还是挺复杂的,准备单独弄一篇博客介绍

源码

WXSoundRecord

微信小程序中实现一个模拟声音波动的动态刻度尺效果,你可以通过以下几个步骤: 1. **HTML结构**: 首先创建一个基础的界面布局,包括一个容器用于显示刻度尺,以及可能的一个音频元素来触发声音变化。 ```html <view class="scale-meter"> <audio id="audio" hidden></audio> <view class="scale-line"></view> </view> ``` 2. **CSS样式**: 设计刻度线和波浪动画的样式,例如使用 CSS `transform` 和 `animation` 属性。 ```css .scale-meter { position: relative; height: 50px; /* 根据需求调整高度 */ } .scale-line { width: 100%; height: 2px; background-color: #ccc; position: absolute; top: 25%; /* 刻度中间位置 */ animation: wave 2s ease-in-out infinite; } @keyframes wave { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } ``` 3. **JavaScript逻辑**: 使用 JavaScript 监听音频元素的事件,当音频播放或暂停时改变刻度线的位置,模拟波动效果。可以使用 `Audio` 对象的 `play()` 和 `pause()` 方法,以及定时器 `setInterval` 或 `setTimeout` 来控制动画速度。 ```javascript Page({ data: { audioPlaying: false, }, onLoad: function() { const audio = this.selectComponent('#audio'); audio.src = 'your_audio_url'; }, playSound: function() { this.setData({ audioPlaying: true }); if (this.data.audioPlaying) { audio.play(); // 模拟音量增大时刻度上移 this.animateScaleUp(); } else { audio.pause(); // 音乐停止或暂停时刻度回位 this.animateScaleToNeutral(); } }, animateScaleUp: function() { // 更新刻度线的样式,如增加透明度表示音量增大 // 然后开始下一次动画周期,比如延时1秒 setTimeout(() => { // ... }, 1000); }, animateScaleToNeutral: function() { // 当音乐暂停或静音,将刻度线回到初始位置 this.setData({ audioPlaying: false, scaleLineOpacity: 1, // 如果有需要,设置刻度线透明度为1 }); }, onAudioPlayChange: function(e) { this.playSound(); }, }); ``` 4. **用户交互**: 添加按钮或触摸事件监听器,让用户能触发音频播放和暂停,从而带动刻度波动。 记得替换 `'your_audio_url'` 为实际的声音文件地址,并根据你的设计调整动画细节。这只是一个基本框架,你可以根据需要添加更多功能,比如实时音量反馈、刻度数值显示等。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值