vue实现视频播放,vue自动播放音频
这篇文章主要介绍了某视频剪辑软件节点实现音频录制播放，功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
实现效果：
主要实现代码逻辑部分，具体页面结构就不一一介绍了。
某视频剪辑软件部分：
安装recorderx
cnpm安装记录器x -保存
或者
新公共管理安装记录器x -保存
在具体的组件中引入
脚本
从" axios "导入axios
导入{
烤
}来自vant ；
导入记录器x，{
编码类型
}来自”记录器x”；
const RC=新记录器x()；
导出默认值{
data(){
返回{
开始时间：空，
结束时间：空
}
},
方法：{
//录制语音
录音声音(){
//that.news_img=！that.news_img
rc.start()。然后(()={
这个。开始时间=新日期()；
})。接住(错误={
警报(获取麦克风失败);
});
},
//发送语音
异步发送语音(){
RC。pause()；
这个。结束时间=新日期()；
let wav=rc.getRecord({
encodeTo: ENCODE_TYPE .WAV，
可压缩：真
});
设语音时间=数学。ceil((这个。结束时间-这个。开始时间)/1000)；
const formData=new formData()；
formData.append(chatVoice ，wav，Date.parse(new Date()) .wav’)；
formData.append(voiceTime ，语音时间)；
let headers={
标题：{
"内容类型":"多部分/形式数据"
}
};
爱可信。post(/API/uploadchatvice ，formData，headers)。然后(res={
//console.log(res)
if (res.data.status===2) {
RC。clear()；
让聊天语音消息=资源数据。聊天语音msg
}
}
});
},
//播放语音
playChatVoice(音频){
设audioUrl=音频
if(audioUrl){
让音频示例=新音频()；
音频示例。src=音频URL//想要播放的音频地址
音频示例.播放().
}否则{
吐司(语音地址已被摧毁);
}
},
}
};
/脚本
结节部分：
这里我使用的是表达框架搭建的后台
具体的获取前台的请求代码如下
安装多党的
cnpm安装多方-保存
const express=require( express )；
常量路由器=快递.路由器();
const multi party=require(" multi party ")；
const NET _ URL= http://127。0 .0 .1:3000/;
路由器。post(/uploadchatvice ，(req，res，next)={
字母形式=新多党. form()；
形式。uploaddir= chatVoiceUpload
form.parse(req，(err，fields，files)={
console.log(文件、字段)
让聊天语音URL=NET _ URL文件。聊天语音[0]。路径。替换(/\ \/g，/)；
让聊天语音时间=字段。语音时间[0]
console.log(chatVoiceUrl)
if(chavoice URL){
res.json({
状态：2,
聊天语音消息：{
聊天语音时间，
chatVoiceUrl，
}
})
}否则{
res.json({
状态：1,
聊天语音消息：{
聊天语音时间： ,
chatVoiceUrl:" "
}
})
}
//console.log(文件)
})
})
在app.js中，定义语音文件路径
app.use(/chatVoiceUpload ，express。静态(聊天语音上传)；
到此这篇关于某视频剪辑软件节点实现音频录制播放功能的文章就介绍到这了，更多相关某视频剪辑软件实现音频录制播放内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。