/audio_wave_plugin

用于展示音频波形图，音频打点切分

Primary LanguageVue

audio_wave_plugin

A Vue.js component，used for segment audio. 音频切分插件，可展示波形图，分段播放，选区播放等

avatar

Build Setup

# install plugin
npm install audio_wave_plugin --save

# using tutorials
	main.js:
	import audioWave from 'audio_wave_plugin';
	Vue.use(audioWave);

	yourPage.vue:  
	# 要引用的页面
	<template>
	  <div id="yourPage">
		<audio-wave style="width:1080px" ref="AudioWave" :tagChooseList="tagChooseList"></audio-wave>
	  </div>
	</template>
	<script>
	export default {
	  data() {
		return {
		  tagChooseList:["偏高","正常","偏低"],//下拉数组
		  audioUrl:
			"http://kolber.github.io/audiojs/demos/mp3/juicy.mp3"
		};
	  },
	  mounted() {
		this.$refs.AudioWave._initAudio(this.audioUrl, []);
	  }
	};
	</script>

attentions

  • 组件最小宽度为1080px
  • 双击进度条打点切分
  • 左上角播放按钮播放全部音频，每个音频段播放按钮播放当前段音频内容
  • 空格播放：波形图上有选区时播放选区内容，没有选区时播放全部音频
  • 重置波形图：清除波形图选区，重新加载波形图

api

1.初始化组件，第一个参数为音频url，第二个参数是分段的数组，分段为空时传[]

this.$refs.AudioWave._initAudio(url,sectionList);

sectionList格式：

    [
        {
            startTime: "0:00.420",//音频段开始时间，分:秒.毫秒
            endTime: "0:01.180",//音频段结束时间，分:秒.毫秒
            tag: 1,//当前标记内容
            startLeft: "8.67%",
            endLeft: "24.33%",
            isPlaySection: false,//音频段播放按钮
            chevronType: false,//音频段是否展开
            chooseTag: false//音频段展开框中选择框是否展开
        }
    ];

2.获取当前切分内容

var tagList = this.$refs.AudioWave.tagList;
console.log(tagList);

3.获取当前切分内容前检测tagList值是否满足要求

console.log( this.$refs.AudioWave.checkTagList() );
  • （1）每个音频段必须有结束标签
  • （2）每个音频段结束时间必须大于开始时间
  • （3）每个音频段必须有标记内容（即下拉框必须有内容值）

返回值有两种：

  • true; //检测通过
  • 错误字符串; //返回具体检测不通过原因