Skip to content

W
web-project
Commit 763320e1 authored by 张伯涛's avatar 张伯涛
Browse files
Options

波形图功能完善

parent 60c50045
Show whitespace changes
Inline Side-by-side
Showing with 70 additions and 66 deletions
src/views/AIStation/RecyclePumpPage/RecyclePumpHistoryPage.vue
View file @ 763320e1
......@@ -4,8 +4,8 @@ import {getPipListHistoryData} from "../../../api/AIStation/PipelineTemp.js";
import {getAudio,getRecycleListAlarmData, getRecycleListHistoryData} from "../../../api/AIStation/RecyclePump.js";
import store from "../../../store/index.js";
import WaveSurfer from 'wavesurfer.js';
import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline';
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions';
import TimelinePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.timeline';
import RegionsPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions';
const RecyclePumpData = ref([]);
const params = ref({})
const options = ref([])
......@@ -46,11 +46,49 @@ function selectRow(row) {
const audioPlayer = ref(null);
const waveform = ref(null);
const isSelecting = ref(false);
const selectionStart = ref(0);
const selectionEnd = ref(0);
const timeline = ref(null);
const wavesurfer = ref(null);
/** 播放区域*/
function playAudioRegion() {
let region = Object.values(wavesurfer.value.regions.list)[0];
region.play();
}
/** 停止播放区域*/
function stopPlayAudioRegion() {
wavesurfer.value.pause();
}
/** 放大*/
function zoom() {
let region = Object.values(wavesurfer.value.regions.list)[0];
if (region) {
const start = region.start; // 区域开始时间
const end = region.end; // 区域结束时间
const zoomLevel = 400; // 设置放大级别（可以根据需求调整）
// 加载后进行缩放
wavesurfer.value.seekTo(start / wavesurfer.value.getDuration()); // 移动到开始时间
wavesurfer.value.zoom(zoomLevel); // 设置缩放级别
// wavesurfer.value.play(); // 播放新的音频段
}
}
/** 还原*/
function handleBack () {
let region = Object.values(wavesurfer.value.regions.list)[0];
if (region) {
const start = region.start; // 获取区域开始时间
const end = region.end; // 获取区域结束时间
// 移动到选定区域的开始时间
wavesurfer.value.seekTo(start / wavesurfer.value.getDuration());
// 设置默认缩放级别（假设为1或你所需的其他值）
const defaultZoomLevel = 1; // 根据需要调整
wavesurfer.value.zoom(defaultZoomLevel);
}
}
function playAudio() {
if (wavesurfer.value) {
wavesurfer.value.destroy();
......@@ -62,7 +100,9 @@ function playAudio() {
const audioStream = await fetchAudioStream();
const audioBlob = new Blob([audioStream], { type: 'audio/mp3' });
const audioObjectUrl = URL.createObjectURL(audioBlob);
console.log('audioStream',audioStream)
console.log('audioBlob',audioBlob)
console.log('audioObjectUrl',audioObjectUrl)
// 创建 WaveSurfer 实例
wavesurfer.value = WaveSurfer.create({
container: waveform.value,
......@@ -77,12 +117,27 @@ function playAudio() {
responsive: true,
normalize: true,
plugins: [
RegionsPlugin.create(),
RegionsPlugin.create(
{
regionsMinLength: 2,
regions: [
{
start: 5,
end: 7,
loop: false,
color: 'hsla(200, 50%, 70%, 0.4)',
minLength: 1,
}
],
// 拖动选择
dragSelection: {
slop: 5
}
}
),
TimelinePlugin.create({
container: timeline.value,
formatTime: (seconds) => {
return `${Math.floor(seconds)}s`;
},
fontSize: 14,
//主要时间标签颜色
primaryColor: "#9191a5",
......@@ -97,60 +152,8 @@ function playAudio() {
});
// 使用 WaveSurfer 加载音频流
wavesurfer.value.load(audioObjectUrl);
wavesurfer.value.on('region-created', (region) => {
console.log('区域创建:', region);
});
})
}
const startSelection = (event) => {
isSelecting.value = true;
selectionStart.value = wavesurfer.value.getCurrentTime();
};
const endSelection = (event) => {
if (isSelecting.value) {
isSelecting.value = false;
selectionEnd.value = wavesurfer.value.getCurrentTime();
createRegion(selectionStart.value, selectionEnd.value);
zoomIn(); // 选中后自动放大
}
};
const createRegion = (start, end) => {
if (end > start) {
wavesurfer.value.addRegion({
start: start,
end: end,
color: 'rgba(255, 0, 0, 0.5)',
drag: false // 禁止拖动区域
});
}
};
const zoomIn = () => {
if (selectionStart.value >= 0 && selectionEnd.value > selectionStart.value) {
const duration = selectionEnd.value - selectionStart.value;
wavesurfer.value.zoom(10); // 放大波形图
// 调整时间轴为1秒间隔
wavesurfer.value.getCurrentTime();
const timeline = document.querySelector('#timeline');
timeline.innerHTML = ''; // 清空原时间轴
for (let i = Math.floor(selectionStart.value); i <= Math.ceil(selectionEnd.value); i++) {
const timeMarker = document.createElement('div');
timeMarker.innerText = `${i}s`;
timeMarker.style.position = 'absolute';
timeMarker.style.left = `${(i - selectionStart.value) / duration * 100}%`;
timeline.appendChild(timeMarker);
}
}
};
const zoomOut = () => {
wavesurfer.value.zoom(1); // 还原波形图
// 还原时间轴显示
const timeline = document.querySelector('#timeline');
timeline.innerHTML = ''; // 清空原时间轴
};
async function fetchAudioStream() {
const response = await fetch('http://192.168.0.14:8099/busFireExtinguisher/test');
if (!response.ok) {
......@@ -368,8 +371,10 @@ defineExpose({
<span>音频:</span>
<audio ref="audioPlayer" controls></audio>
<button @click="playAudio">获取音频</button>
<button @click="zoomIn">放大区域</button>
<button @click="zoomOut">缩小区域</button>
<button @click="playAudioRegion">播放区域</button>
<button @click="stopPlayAudioRegion">暂停播放区域</button>
<button @click="zoom">放大</button>
<button @click="handleBack">还原</button>
<!-- <span>{{ selectedRow.audioUrl }}</span>-->
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment