vue aduio标签使用 以及 blob数据流数据处理

2020-09-25  本文已影响0人  lazy_tomato

START

目录

1.业务逻辑梳理

2.项目环境

3.URL音频处理

show.png

3.1 audio标签

方案一： 可以直接在html中写一个 audio标签 动态赋值src 既可

由于原生的音乐播放很丑，所以模拟做了一个假的播放效果 ,代码如下：

 // 已选音频播放
    onPlayOrPause(url) {
      this.$refs["audio"].src = url;
      if (this.isPlay) {
        this.$refs["audio"].pause();
        this.isPlay = false;
      } else {
        this.$refs["audio"].play();
        this.isPlay = true;
      }
    },

方案二 ：可以在播放按钮添加 点击事件 new Aduio() 也是可以的

代码如下

let audio = new Audio();
audio.src = url;

audio.pause()  //暂停
audio.play()   //播放

3.2 音频最大时长获取

html

  <audio
        :src="voiceUrl"
        ref="audio"
        @timeupdate="onTimeUpedate"
        @loadedmetadata="onLoadedmetadata"
      ></audio>

js

  // 最大播放时长
    onLoadedmetadata(e) {
      this.duration = e.target.duration;
    },

3.3 音频当前播放时间

html

  <audio
        :src="voiceUrl"
        ref="audio"
        @timeupdate="onTimeUpedate"
        @loadedmetadata="onLoadedmetadata"
      ></audio>

js

// 当前播放时间
    onTimeUpedate(e) {
      this.currentTime = e.target.currentTime;
    },

3.4 播放进度

    <el-progress
    :percentage="
    currentTime && duration ? (currentTime / duration) * 100 : 0
    "
    status="success"
    :stroke-width="2"
    :show-text="false"
    ></el-progress>

3.5 播放时间格式化

const realFormatSecond = function realFormatSecond(second) {
  var secondType = typeof second;
  if (secondType === "number" || secondType === "string") {
    second = parseInt(second);
    var hours = Math.floor(second / 3600);
    second = second - hours * 3600;
    var mimute = Math.floor(second / 60);
    second = second - mimute * 60;
    return (
      ("0" + hours).slice(-2) +
      ":" +
      ("0" + mimute).slice(-2) +
      ":" +
      ("0" + second).slice(-2)
    );
  } else {
    return "00:00:00";
  }
};


//加个过滤器
  filters: {
    // 将整数转换成 时分秒
    formatSecond(second = 0) {
      return realFormatSecond(second);
    },
  },

4.二进制数据流音频处理

4.1整体代码

template

<template>
  <div>
    <h1>获取音频二进制数据流</h1>
    <el-button @click="up">开始获取音频数据</el-button>
    <audio :src="voiceUrl" controls></audio>
  </div>
</template>

script

<script>
export default {
  data() {
    return {
      voiceUrl: "",
    };
  },
  methods: {
    up() {
      this.$axios.defaults.baseURL = "/api";
      this.$axios({
        url: "/custom/weChat/doTest",
        method: "post",
        data: { media_id: "w5M3TLtyN7W4_4E8bL4F_kscTXc9CeV7HfxmZutPpZ4" },
        responseType: "blob",
      })
        .then((res) => {
          const blob = res.data;

          // 1.获取数据流并下载
          // const reader = new FileReader();
          // reader.readAsDataURL(blob);
          // console.log(reader);
          // reader.onload = (e) => {
          //   const a = document.createElement("a");
          //   a.download = `文件名称.mp3`;
          //   a.href = e.target.result;
          //   document.body.appendChild(a);
          //   a.click();
          //   document.body.removeChild(a);
          // };

          // 2.获取数据流处理成url,直接复制给audio的src去使用
          var filereader = new FileReader();
          filereader.readAsArrayBuffer(blob);
          filereader.onload = (e) => {
            console.log(filereader.result);
            var blob = new Blob([filereader.result]);
            this.voiceUrl = URL.createObjectURL(blob);
          };
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

4.2 请求需要添加配置

 this.$axios({
       url: "/custom/weChat/doTest",
       method: "post",
       data: { media_id: "w5M3TLtyN7W4_4E8bL4F_kscTXc9CeV7HfxmZutPpZ4" },
       // 设置响应类型为 blob ，不设置，拿到的数据格式会有问题
       responseType: "blob",
     })

4.3 下载 二进制数据流的音频

//  声明一个变量  blob 接收数据流      
    const blob = res.data;

//  1.获取数据流并下载
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = (e) => {
        const a = document.createElement("a");
        //下面设置下载的文件名成
        a.download = `文件名称.mp3`;
        a.href = e.target.result;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    };

readAsDataURL 方法会读取指定的 [Blob]或 [File] 对象。读取操作完成的时候，[readyState] 会变成已完成DONE，并触发 loadend 事件，同时 [result]属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

4.4 数据转换成可访问的url

//  声明一个变量  blob 接收数据流      
    const blob = res.data;

// 2.获取数据流处理成url,直接复制给audio的src去使用
    var filereader = new FileReader();
    filereader.readAsArrayBuffer(blob);
    filereader.onload = (e) => {
        console.log(filereader.result);
        var blob = new Blob([filereader.result]);
        this.voiceUrl = URL.createObjectURL(blob); 
        // this.voiceUrl 就是转换好的url,直接赋值给音频的src即可
    };

5. 音频相关的问题

END

暂时就写那么多啦，后期再补充。ღ( ´･ᴗ･` )比心

上一篇下一篇

猜你喜欢

热点阅读