前端实现语音旁音波效果

朱雀 2023-01-22 14:56 137阅读 0赞

##### 前端实现语音录制功能 #####

> 背景：在H5页面实现移动端的语音录制，需要实现写相关的css波纹效果。

![在这里插入图片描述][20210520143440413.png]

###### 代码片段 ######

<template>
    	<div class="sound-sonic_wave">
    	  	<div class="wave w1"></div>
    	    <div class="wave w2"></div>
      </div>
    </template>
    <style lang="less" scoped> .wave { position: absolute; top: calc((100% - 60px)/2); left: calc((100% - 60px)/2); width: 60px; height: 60px; border-radius: 50%; background-attachment: fixed; background-position: center center; } .w1 { z-index: 2; border: 1px solid red; background-size: auto 106%; animation: wave 1s infinite; } .w2 { z-index: 3; border: 1px solid red; animation: wave 1s .2s infinite; } @keyframes wave { 0% { top: calc((100% - 60px)/2); left: calc((100% - 60px)/2); width: 60px; height: 60px; } 100% { top: calc((100% - 250px)/2); left: calc((100% - 250px)/2); width: 250px; height: 250px; opacity: 0.4; } } </style>

> 需要将波纹定位在我们的目标元素上，看具体的状态显示隐藏。

###### base64ToBlob ######

// base64ToBlob
      function base64ToBlob(base64, fileType = 'audio/wav') { 
        let typeHeader = 'data:' + fileType + ';base64,'
        let audioSrc = typeHeader + base64
        let arr = audioSrc.split(',')
        let array = arr[0].match(/:(.*?);/)
        let mime = (array && array.length > 1 ? array[1] : fileType) || fileType
        let bytes = window.atob(arr[1])
        let ab = new ArrayBuffer(bytes.length)
        let ia = new Uint8Array(ab)
        for (let i = 0; i < bytes.length; i++) { 
          ia[i] = bytes.charCodeAt(i)
        }
        return new Blob([ab], { 
          type: mime
        })
      }

###### BlobToFile ######

// BlobToFile
    function blobToFile(blob) { 
     	return new File([blob], Date.now(), {  type: blob.type, lastModified: Date.now() })
    }

[20210520143440413.png]: /images/20221020/2820c222c73547bdb943b952d6debd4b.png