Skip to content

C
confucius
Commit 37d79061 authored by Mac's avatar Mac
Browse files
Options

修改样式 处理音频播放问题

parent 70dff8ae
Hide whitespace changes
Inline Side-by-side
Showing with 287 additions and 57 deletions
src/api/common/common.js
View file @ 37d79061
......@@ -396,12 +396,12 @@ export function EduDownLoad(cmd, msg, fileName, callBack) {
*/
export function wechatUploadSelfFile(path, file, callback, configObj) {
//用户登录缓存
//配置写死的 阿里云
//配置写死的 腾讯云
var uploadConfig = {
Region:"oss-cn-chengdu",
SecretId:"LTAIwE7l9dImZSa3",
SecretKey:"j47Ajn0d0WzUCIX8Biyj3P2r8QDltI",
Bucket: "vt-im-bucket"
Region:"ap-chengdu",
SecretId:"AKIDDPnbIzi8C1eqEOPP8dw6MNAg9H9ldDKd",
SecretKey:"PdcLtOjslUzNFYdU4OSI1fKtdHpFT2Ob",
Bucket: "viitto-1301420277"
};
//获取文件扩展名
var index = file.name.lastIndexOf(".");
......@@ -415,6 +415,6 @@ export function EduDownLoad(cmd, msg, fileName, callBack) {
})
if (uploadConfig) {
newPath += "/" + timestamp1 + "" + suffix;
UploadFileToALi(uploadConfig, newPath, file, uploadLoadding, callback);
UploadFileToTencent(uploadConfig, newPath, file, uploadLoadding, callback);
}
}
\ No newline at end of file
src/components/enterprise/material/allAddSC.vue
View file @ 37d79061
......@@ -125,14 +125,32 @@
emit-value map-options />
<div style="margin-top: 15px;">
<div style="width:70px">上传音频:</div>
<audio controls="controls" v-if='addMsg.AudioModel.AudioPath' style="margin-top: 10px;">
<source :src="addMsg.AudioModel.AudioPath" >
<!-- <audio controls="controls" style="margin-top: 10px;">
<source :src="addMsg.AudioModel.AudioPath" > -->
</audio>
<!-- </audio> -->
<q-circular-progress
v-if='addMsg.AudioModel.AudioPath'
show-value
class="text-red q-ma-md"
:max='duration'
:value="timevalue"
size="70px"
:thickness="0.2"
color="light-blue"
track-color="grey-3"
@click.stop="playVoice(addMsg.AudioModel.AudioPath)"
>
<q-icon name="volume_up" class="q-mr-xs" />
<span style="font-size: 11px;">
{{timevalue?timevalue.toFixed(1):0}}
</span>
</q-circular-progress>
<div style="margin-top: 15px;">
<el-upload class="avatar-uploader " action="" :before-upload="uploadFile"
:show-file-list="false">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传">
<q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传" @click='stopPlayVoice()'>
</q-btn>
</el-upload>
<div style="margin-top: 20px;">
......@@ -145,8 +163,8 @@
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white">
<q-btn class="q-mr-md" label="取消" @click="getcancel" />
<q-btn color="accent" class="q-mr-md" label="确定" @click="saveaudio()" />
<q-btn class="q-mr-md" label="取消" @click="getcancel(),stopPlayVoice()" />
<q-btn color="accent" class="q-mr-md" label="确定" @click="saveaudio(),stopPlayVoice()" />
</q-card-actions>
</q-card>
</q-dialog>
......@@ -314,6 +332,8 @@
</template>
<script>
import BenzAMRRecorder from 'benz-amr-recorder'
import {
wechatUploadSelfFile
} from "../../../api/common/common"; //上传图片
......@@ -345,8 +365,10 @@
Type: 1,
Is_Sync:1,//是否同步 暂时默认为1 同步
MediaGroupId: '',
}
},
duration:0,//音频中时长
timevalue:0,//音频播放到时间点
playRec:null
}
},
created() {
......@@ -506,11 +528,11 @@
}
if (this.type == 4) {//音频上传
// 文件类型进行判断
console.log(files.type)
const isAudio = files.type === "audio/amr";
const isLt2M = files.size / 1024 / 1024 < 2;
const isTime60S = this.getTimes(files) >= 60 ? true : false;
let Times = this.getTimes(files)
const isTime60S = Times >= 60 ? true : false;
// 获取时长
;
if (!isAudio) {
......@@ -534,11 +556,28 @@
position: 'top'
})
} else {
wechatUploadSelfFile('wechatcatalogue', files, res => {
if (res.Code == 1) {
this.addMsg.AudioModel.AudioName = res.FileName;
this.addMsg.AudioModel.AudioPath = res.FileUrl;
this.$forceUpdate();
let amr= new BenzAMRRecorder()
let that = this
amr.initWithUrl(res.FileUrl).then(function () {
that.duration = amr.getDuration()
if(Number(that.duration) >=60){
that.$q.notify({
type: 'negative',
message: `上传文件时长不能超过60秒!!`,
position: 'top'
})
}else{
that.addMsg.AudioModel.AudioName = res.FileName;
that.addMsg.AudioModel.AudioPath = res.FileUrl;
that.$forceUpdate();
}
}).catch((e) => {
console.log(e)
})
}
})
}
......@@ -805,6 +844,43 @@
);
}
},
playVoice(_url) {
// TODO 这里暂时没处理 音频播放中暂停
let vm = this
if (vm.playRec !== null) {
vm.stopPlayVoice()
}
vm.playRec = new BenzAMRRecorder()
//⚠️注意跨域问题
vm.playRec.initWithUrl(_url).then(function () {
vm.playRec.play()
let timer = setInterval(() => {
vm.timevalue +=0.1
vm.$forceUpdate();
}, 100);
vm.playRec.onEnded(function () {
vm.timevalue = 0
clearInterval(timer);//停止
setTimeout(() => {
vm.$forceUpdate();
}, 1000);
})
}).catch((e) => {
console.log(e)
vm.$message.error('播放录音失败')
})
},
//停止播放
stopPlayVoice() {
if(this.playRec){
if (this.playRec.isPlaying()) {
this.playRec.stop()
}
}
},
}
}
......
src/components/enterprise/material/allmaterial.vue
View file @ 37d79061
......@@ -7,7 +7,7 @@
</div> -->
<div class="page-content">
<q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
class="sticky-column-table no-bottom-table" separator="none" title="" :data="dataList" :columns="columns"
class="sticky-column-table" separator="none" title="" :data="dataList" :columns="columns"
row-key="name">
<template v-slot:body-cell-title="props">
......@@ -23,12 +23,22 @@
<q-img v-if="props.row.Type==2 || props.row.Type==3 || props.row.Type==6"
:src="getType(props.row,'content')" style="width: 80px;height: 80px;border-radius: 6px;display: flex;">
</q-img>
<audio controls="controls"
v-if='props.row.Type==4 && props.row.AudioModel && props.row.AudioModel.AudioPath'
<!-- <audio controls="controls"
style="width: 200px;height: 40px;">
<source :src="props.row.AudioModel.AudioPath" type="audio/ogg">
<source :src="props.row.AudioModel.AudioPath" type="audio/mpeg">
</audio>
</audio> -->
<q-circular-progress v-if='props.row.Type==4 && props.row.AudioModel && props.row.AudioModel.AudioPath'
show-value class="text-red q-ma-md" :max='props.row.duration' :value="props.row.timevalue" size="70px"
:thickness="0.2" color="light-blue" track-color="grey-3"
@click.stop="playVoice(props.row.AudioModel.AudioPath,props.pageIndex)">
<q-icon name="volume_up" class="q-mr-xs" />
<span style="font-size: 11px;">
{{props.row.timevalue?props.row.timevalue.toFixed(1):0}}
</span>
</q-circular-progress>
<video width="200" height="120" controls="controls"
v-if="props.row.Type==5 && props.row.VideoModel && props.row.VideoModel.VideoPath">
<source :src="props.row.VideoModel.VideoPath" type="video/ogg" />
......@@ -50,13 +60,17 @@
</q-td>
</template>
<template v-slot:bottom>
<!-- <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
:input="true" @input="changePage" /> -->
</template>
<template v-slot:body-cell-optioned="props">
<q-td :props="props">
<q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
v-if="props.row.Type==1 || props.row.Type==3 || props.row.Type==6 " @click="goedit(props.row)" />
<q-btn flat size="xs" icon="iconfont icon-yidongdao" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="移动"
@click="plmove(props)" />
<q-btn flat size="xs" icon="iconfont icon-yidongdao" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
label="移动" @click="plmove(props)" />
<q-btn flat size="xs" icon="delete" color="negative" class="q-mr-xs" label="删除"
@click="goDetailed(props.row,'0')" />
</q-td>
......@@ -75,6 +89,7 @@
<script>
import alladdsc from './allAddSC'
import BenzAMRRecorder from 'benz-amr-recorder'
import {
delWecharMediumInfo,//删除素材
} from '../../../api/system/wechat';
......@@ -149,11 +164,20 @@
field: 'DeptId'
}
],
playRec: null, //播放对象
voiceActive: null,
}
},
created() {
},
destroyed(){//页面销毁时候清楚音频的播放
if(this.playRec){
if (this.playRec.isPlaying()) {
this.playRec.stop()
}
}
},
methods: {
......@@ -262,6 +286,49 @@
this.$emit('editsuccess')
this.Isadd = false
},
playVoice(_url, index) {
// TODO 这里暂时没处理 音频播放中暂停
let vm = this
if (vm.voiceActive && (vm.voiceActive != index)) {//如果再放一个点击另一个上一个清0
vm.dataList[vm.voiceActive].timevalue = 0
}
if (vm.playRec !== null) {
vm.stopPlayVoice(index)
}
vm.playRec = new BenzAMRRecorder()
//⚠️注意跨域问题
vm.playRec.initWithUrl(_url).then(function () {
vm.voiceActive = index
vm.playRec.play()
let timer = setInterval(() => {
vm.dataList[index].timevalue += 0.1;
vm.$set(vm.dataList, index, vm.dataList[index])
// vm.$forceUpdate();
}, 100);
vm.playRec.onEnded(function () {
vm.voiceActive = null;
vm.dataList[index].timevalue = 0
clearInterval(timer);//停止
setTimeout(() => {
vm.$set(vm.dataList, index, vm.dataList[index])
}, 1000);
})
}).catch((e) => {
console.log(e)
vm.$message.error('播放录音失败')
})
},
//停止播放
stopPlayVoice() {
if(this.playRec){
if (this.playRec.isPlaying()) {
this.playRec.stop()
}
}
},
}
}
......
src/components/enterprise/material/audiomaterial.vue
View file @ 37d79061
......@@ -10,7 +10,8 @@
<q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="edit" label="修改分组"
@click="plmove()"></q-btn>
</div>
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;" v-if="dataList.length>0">
<div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;"
v-if="dataList.length>0">
<q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
:style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
@click="dataList[y].check = !dataList[y].check,$forceUpdate();">
......@@ -22,31 +23,48 @@
<!-- <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
@click.stop="goedit(x)"></i> -->
</div>
<!-- <audio controls="controls" v-if='x.AudioModel && x.AudioModel.AudioPath' style="margin-top: 10px;" class="imgstyle">
<source :src="x.AudioModel.AudioPath" type="audio/ogg">
<source :src="x.AudioModel.AudioPath" type="audio/mpeg">
</audio> -->
<audio controls="controls" v-if='x.AudioModel && x.AudioModel.AudioPath' style="margin-top: 10px;" class="imgstyle" :src="x.AudioModel.AudioPath">
<!--
<audio controls="controls" v-if='x.AudioModel && x.AudioModel.AudioPath'
style="margin-top: 10px;" class="imgstyle" :src="x.AudioModel.AudioPath"></audio> -->
<q-circular-progress
show-value
class="text-red q-ma-md"
:max='x.duration'
:value="x.timevalue"
size="70px"
:thickness="0.2"
color="light-blue"
track-color="grey-3"
@click.stop="playVoice(x.AudioModel.AudioPath,y)"
>
<q-icon name="volume_up" class="q-mr-xs" />
<span style="font-size: 11px;">
{{x.timevalue?x.timevalue.toFixed(1):0}}
</span>
</audio>
<div class="onetext" style="margin-top: 5px;">{{x.AudioModel&&x.AudioModel.AudioName?x.AudioModel.AudioName:''}}</div>
</q-circular-progress>
<div class="onetext" style="margin-top: 5px;">
{{x.AudioModel&&x.AudioModel.AudioName?x.AudioModel.AudioName:''}}</div>
<div class="onetext" style="margin-top: 5px;">上传者：{{x.UpdateByName}}</div>
<div class="onetext" style="margin-top: 5px;">分组：{{x.MediumGroupName}}</div>
</q-card-section>
</q-card>
</div>
<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据
</div>
</div>
<div v-if="Isadd==true">
<alladdsc :allclassifyList="allclassifyList" type='4' @editsuccess="getchildren" :editobj='editobj' @getcancel='Isadd=false'></alladdsc>
<alladdsc :allclassifyList="allclassifyList" type='4' @editsuccess="getchildren" :editobj='editobj'
@getcancel='Isadd=false'></alladdsc>
</div>
</div>
</template>
<script>
import BenzAMRRecorder from 'benz-amr-recorder'
import alladdsc from './allAddSC'
export default {
name: "audiomaterial",
......@@ -58,7 +76,7 @@
type: Array,
default: [],
},
allclassifyList:{
allclassifyList: {
type: Array,
default: [],
}
......@@ -67,39 +85,89 @@
return {
loading: false,
Isadd: false,
editobj:null
editobj: null,
playRec: null, //播放对象
voiceActive: null,
}
},
created() {
created() {
},
destroyed(){//页面销毁时候清楚音频的播放
if(this.playRec){
if (this.playRec.isPlaying()) {
this.playRec.stop()
}
}
},
methods: {
goadd() {
this.Isadd = true;
this.editobj=null
this.editobj = null
},
goedit(row){
this.editobj= {}
goedit(row) {
this.editobj = {}
this.editobj.Id = row.Id;
this.editobj.MediaGroupId = row.MediaGroupId;
this.editobj.Type = row.Type;
this.editobj.AudioModel = JSON.parse(JSON.stringify(row.AudioModel)) ;
this.editobj.AudioModel = JSON.parse(JSON.stringify(row.AudioModel));
this.Isadd = true
},
getchildren(){
getchildren() {
this.$emit('editsuccess')
this.Isadd = false
},
pldelete(){
pldelete() {
this.$emit('getdelete')
},
plmove(){
plmove() {
this.$emit('getmove')
}
},
playVoice(_url, index) {
// TODO 这里暂时没处理 音频播放中暂停
let vm = this
if(vm.voiceActive && (vm.voiceActive !=index)){//如果再放一个点击另一个上一个清0
vm.dataList[vm.voiceActive].timevalue = 0
}
if (vm.playRec !== null) {
vm.stopPlayVoice(index)
}
vm.playRec = new BenzAMRRecorder()
//⚠️注意跨域问题
vm.playRec.initWithUrl(_url).then(function () {
vm.voiceActive = index
vm.playRec.play()
let timer = setInterval(() => {
vm.dataList[index].timevalue +=0.1
vm.$forceUpdate();
}, 100);
vm.playRec.onEnded(function () {
vm.voiceActive = null;
vm.dataList[index].timevalue = 0
clearInterval(timer);//停止
setTimeout(() => {
vm.$forceUpdate();
}, 1000);
})
}).catch((e) => {
console.log(e)
vm.$message.error('播放录音失败')
})
},
//停止播放
stopPlayVoice() {
if(this.playRec){
if (this.playRec.isPlaying()) {
this.playRec.stop()
}
}
},
}
}
......
src/pages/enterprise/materialManage.vue
View file @ 37d79061
......@@ -20,7 +20,7 @@
@click="msg.Type = x.Id,resetSearch()" />
</q-tabs>
<div v-if="tabCheck=='0'" >
 <allmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getmove="getmove"></allmaterial>
 <allmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getmove="getmove" ref="allm"></allmaterial>
</div>
<div v-if="tabCheck=='1'">
 <textmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getmove="getmove"></textmaterial>
......@@ -32,7 +32,7 @@
 <imgtextmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></imgtextmaterial>
</div>
<div v-if="tabCheck=='4'">
 <audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></audiomaterial>
 <audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove" ref="allm"></audiomaterial>
</div>
<div v-if="tabCheck=='5'">
 <videomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></videomaterial>
......@@ -94,6 +94,7 @@
import videomaterial from '../../components/enterprise/material/videomaterial'
import appletmaterial from '../../components/enterprise/material/appletmaterial'
import filematerial from '../../components/enterprise/material/filematerial'
import BenzAMRRecorder from 'benz-amr-recorder'
export default {
components: {
......@@ -163,18 +164,36 @@
},
getList() {
this.loading=true
if(this.tabCheck==0 || this.tabCheck==1){
this.msg.pageSize = 15
}else if(this.tabCheck==2 || this.tabCheck==3 || this.tabCheck==6){
this.msg.pageSize = 12
}else if(this.tabCheck==4 || this.tabCheck==5 || this.tabCheck==7){
this.msg.pageSize = 10
}
getWeChatMediumPageList(this.msg).then(res => {
this.loading=false
this.dataList = res.Data.PageData;
this.PageCount = res.Data.Count
this.dataList.forEach(x=>{
x.check= false
})
x.check= false;
let amr= new BenzAMRRecorder()
if(x.Type == 4 && x.AudioModel!=null){
x.timevalue = 0;
amr.initWithUrl(x.AudioModel.AudioPath).then(function () {
x.duration = amr.getDuration()
}).catch((e) => {
console.log(e)
})
}
})
})
},
changePage(e) {
if(this.tabCheck==0 || this.tabCheck==4){
this.$refs.allm.stopPlayVoice()
}
this.msg.pageIndex = e;
this.getList()
},
......
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