custom-audio

使用

Usage no npm install needed!

<script type="module">
  import customAudio from 'https://cdn.skypack.dev/custom-audio';
</script>

README

custom-audio

使用

yarn add custom-audio
npm install custom-audio
import CustomAudio from 'custom-audio';
import 'custom-audio/lib/custom-audio.css'
Vue.use(CustomAudio);
<template>
  <div id="app">
     <CustomAudio :config="customParams"
                     @audioCanplay="audioCanplay"
                     @audioTimeUpdate="audioTimeUpdate"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class App extends Vue {
  private customParams = {
    url: "https://dshvv.oss-cn-beijing.aliyuncs.com/speak.wav",
    keyframes: [
      {
        duration: 9140,
        label: "ivr",
        color: "white",
      },
      {
        duration: 15940,
        label: "振铃",
        color: "red",
      },
      {
        duration: 8840,
        color: "green",
        label: "人工服务",
      },
      {
        duration: 6280,
        color: "blue",
        label: "满意度",
      },
    ],
  };
  
  private audioCanplay(e: any){
    console.log('音频已准备好,可以播放了',e);
  }
    
  private audioTimeUpdate(e: any){
    console.log('音频当前播放进度更新',e);
  }
}
</script>

参数

interface keyframe{
    // 此段的时长 毫秒
    duration: number;
    // 关键段颜色标识
    color: string;
    // 关键点名字
    label: string;
}

export interface CustomAudioParams{
    // 音频地址
    url: string;
    // 播放图标自定义
    playImg?:string;
    // 暂停图标自定义
    pauseImg?:string;
    // 进度圆球的样式
    pointImg?:string;
    // 是否开启静音工具
    mutedTool?: boolean;
    // 是否开启重置功能
    restartTool?: boolean;
    // 是否开启下载功能
    downTool?: boolean;
    // 关键帧
    keyframes?:Array<keyframe>;
    // 是否开启label显示,默认true
    showLabel?:boolean;
}
audioCanplay、audioTimeUpdate原生节点的回调

预览
image

项目分析

src为组件源码
examples是例子,在npm run server的时候启动
dist是组件(src)打包(lib)后的代码
screenshots效果预览图
types为类型文件,这里是提供给外部(引用处)或者内部用的,但是src会被忽略上传到npm。所以单独提出来