Commit 5b21dd65 authored by liwei's avatar liwei

添加了遗漏的字段,补了参数校验

parent 6eee0911
......@@ -812,7 +812,7 @@ export default defineComponent({
audioTitle: '',
detailOpen: false,
audioId: '',
AudioUrlList: [],
AudioUrlIdList: [],
audioList: [],
mapBackPostion: [{ lan: "38.854713", lon: "117.481685" }],
fullscreenLoading: false,
......@@ -3338,85 +3338,87 @@ export default defineComponent({
},
/** 获取音频*/
playAudio(id) {
let audioUrl = this.audioList.find(item => item.businessId === id).audioUrl
if(this.audioStatus !== false){
console.log("当前播放的音频zt",this.audioStatus)
console.log("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-")
return
}
this.audioStatus = true
// 如果有波形图,则摧毁现有波形图,渲染新的波形图
console.log('wavesurfer.value',this.wavesurfer)
if (this.wavesurfer) {
this.wavesurfer.destroy();
}
const url = getVideoUrl(audioUrl);
fetch(url).then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
if (this.audioList.length >0 ) {
let audioUrl = this.audioList.find(item => item.businessId === id).audioUrl
if (this.audioStatus !== false) {
console.log("当前播放的音频zt", this.audioStatus)
console.log("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-")
return
}
return response.blob(); // 将响应转换为blob
}).then(res => {
this.audioTitle = this.audioList.find(item => item.businessId === id).deviceName
const audioSrc = URL.createObjectURL(new Blob([res]));
// 播放器和波形图赋值
this.$refs.audioPlayer.src = audioSrc;
// 创建 WaveSurfer 实例
this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform,
// 未播放波形的颜色
waveColor: 'violet',
// 已播放波形的颜色
progressColor: 'purple',
// 波形图的高度,单位为px
height: 150,
// 波形条的宽度
barWidth: 2,
responsive: true,
normalize: true,
plugins: [
// 区域选择插件
RegionsPlugin.create(
{
regionsMinLength: 2,
regions: [
{
start: 5,
end: 15,
loop: false,
color: 'hsla(200, 50%, 70%, 0.4)',
minLength: 1,
this.audioStatus = true
// 如果有波形图,则摧毁现有波形图,渲染新的波形图
console.log('wavesurfer.value', this.wavesurfer)
if (this.wavesurfer) {
this.wavesurfer.destroy();
}
const url = getVideoUrl(audioUrl);
fetch(url).then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.blob(); // 将响应转换为blob
}).then(res => {
this.audioTitle = this.audioList.find(item => item.businessId === id).deviceName
const audioSrc = URL.createObjectURL(new Blob([res]));
// 播放器和波形图赋值
this.$refs.audioPlayer.src = audioSrc;
// 创建 WaveSurfer 实例
this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform,
// 未播放波形的颜色
waveColor: 'violet',
// 已播放波形的颜色
progressColor: 'purple',
// 波形图的高度,单位为px
height: 150,
// 波形条的宽度
barWidth: 2,
responsive: true,
normalize: true,
plugins: [
// 区域选择插件
RegionsPlugin.create(
{
regionsMinLength: 2,
regions: [
{
start: 5,
end: 15,
loop: false,
color: 'hsla(200, 50%, 70%, 0.4)',
minLength: 1,
}
],
// 拖动选择
dragSelection: {
slop: 5
}
],
// 拖动选择
dragSelection: {
slop: 5
}
}
),
// 时间轴插件
TimelinePlugin.create({
container: this.$refs.timeline,
fontSize: 14,
//主要时间标签颜色
primaryColor: "#9191a5",
//主要时间文字颜色
primaryFontColor: "#9191a5",
//次要时间标签颜色
secondaryColor: "#9191a5",
//次要时间文字颜色
secondaryFontColor: "#9191a5",
})
]
),
// 时间轴插件
TimelinePlugin.create({
container: this.$refs.timeline,
fontSize: 14,
//主要时间标签颜色
primaryColor: "#9191a5",
//主要时间文字颜色
primaryFontColor: "#9191a5",
//次要时间标签颜色
secondaryColor: "#9191a5",
//次要时间文字颜色
secondaryFontColor: "#9191a5",
})
]
});
// 使用 WaveSurfer 加载音频流
this.wavesurfer.load(audioSrc);
this.audioStatus = false
this.waveformLoading = false
}).catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
// 使用 WaveSurfer 加载音频流
this.wavesurfer.load(audioSrc);
this.audioStatus = false
this.waveformLoading = false
}).catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
}
},
/** 播放区域*/
playAudioRegion() {
......
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