前端实现语音旁音波效果

前端登顶之巅–全方位为你梳理前端进阶之路、最全前端知识/面试点总结

前端实现语音录制功能

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

代码片段

<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() })
}