vueはweixin-sdk録音機能を使用しています.
16244 ワード
ちょうど卒業して、会社に入って、出会った最初のvueプロジェクトはweixin-sdk-jsを使って録音の機能をして、そこで研究の旅を始めて、長い間の研究、ついに禅が1時(点)の毛皮を悟って何度も試験して、失敗、総括:weixin-js-sdkはオンラインで使うので、その上Weixin-jsの上で多く使うことしかできませんと言って、乾燥品に行きます.
公式文書の住所を説明します.
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp 14211411
干物は今から始まります
第一歩は必ず先にこのsdkをインストールします.
公式文書の住所を説明します.
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp 14211411
干物は今から始まります
第一歩は必ず先にこのsdkをインストールします.
npm install weixin-js-sdkimport wx from 'weixin-js-sdk'<template>
<div class="hello">
<button class="record" @click="start"> button>
<button @click="stop"> button>
<button @click="cancel"> button>
<br>
<p> {{time}}p>
<div class="list">
<audio ref="player" src="" controls>audio>
div>
<br>
<br>
<div>
<button @click="merge"> button>
<audio ref="allRecord" src="" controls>audio>
div>
div>
template>
<script>
import wx from 'weixin-js-sdk'
const _this = wx
export default {
name: 'HelloWorld',
data () {
return {
localId: '',
serverId: '',
downLoadId: '',
Soff: true,
time: 0,
timer: null
}
},
created () {
var apiUrl = window.location.href
// let apiUrl = 'http://weixin.lostars.cn'
this.axios({
method: 'post',
url: 'api', // api
headers: {'Content-Type': 'application/json'},
data: {
url: apiUrl
}
})
.then((res) => {
// console.log(res)
let list = res.data.msg
_this.config({
debug: false, // , api alert ， ， pc ， log ， pc 。
appId: list.appId, // ，
timestamp: list.timestamp, // ，
nonceStr: list.nonceStr, // ，
signature: list.signature, // ，
jsApiList: ['startRecord', 'stopRecord', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'downloadVoice'] // ， JS
//
})
// config
_this.ready(() => {
})
// sdk
_this.error((res) => {
alert(' ：' + res.errMsg)// wx.config ， ， 。
})
})
.catch((error) => {
console.log(error)
})
},
methods: {
//
start (e) {
let that = this
that.time = 0
_this.startRecord({
success: function () {
// alert(' ')
that.timer = setInterval(() => {
that.time++
}, 1000)
that.vicoeEnd()
},
cancel: function () {
alert(' ')
}
})
},
//
stop () {
let that = this
// clearInterval(that.timer)
_this.stopRecord({
success: function (res) {
// alert(' ')
console.log(res)
clearInterval(that.timer)
that.localId = res.localId
that.upVoice()
},
fail: function (error) {
// alert(' ')
console.log(error)
}
})
},
//
cancel () {
_this.stopRecord({
success: (res) => {
}
})
},
// 60
vicoeEnd () {
let that = this
_this.onVoiceRecordEnd({
// complete
complete: function (res) {
alert('60 ')
that.localId = res.localId
clearInterval(that.timer)
that.upVoice()
}
})
},
//
merge () {
let that = this
var apiUrl = window.location.href
this.axios({
method: 'post',
url: 'http://apiwx.lostars.cn/index.php/index/File/merge',
headers: {'Content-Type': 'application/json'},
data: {
url: apiUrl
}
})
.then((ser) => {
console.log(ser)
that.$refs.allRecord.src = ser.data
})
.catch((error) => {
console.log(error)
})
},
// //
// play () {
// let that = this
// console.log(that.localId)
// _this.playVoice({
// localId: that.localId // ID， stopRecord
// })
// },
// //
// pausePlay () {
// let that = this
// _this.pauseVoice({
// localId: that.localId // ID， stopRecord
// })
// },
// //
// stopPlay () {
// let that = this
// _this.stopVoice({
// localId: that.localId // ID， stopRecord
// })
// },
//
upVoice () {
let that = this
_this.uploadVoice({
localId: that.localId, // ID， stopRecord
isShowProgressTips: 1, // 1，
success: function (res) {
var apiUrl = window.location.href
alert(' ')
that.serverId = res.serverId // ID
that.axios({
method: 'post',
url: 'api',
headers: {'Content-Type': 'application/json'},
data: {
serverId: res.serverId,
url: apiUrl
}
})
.then((data) => {
console.log(data)
that.$refs.player.src = data.data
})
.catch((error) => {
console.log(error)
})
}
})
}
//
// downVoice () {
// let that = this
// _this.downloadVoice({
// serverId: that.serverId, // ID， uploadVoice
// isShowProgressTips: 1, // 1，
// success: function (res) {
// alert(' ')
// that.downLoadId = res.localId // ID
// console.log(res)
// console.log(that.downLoadId)
// }
// })
// },
//
// fake () {
// var apiUrl = window.location.href
// this.axios({
// method: 'post',
// url: 'api',
// headers: {'Content-Type': 'application/json'},
// data: {
// serverId: 'cplZxG7oYspQxopQIb9g_cUJ7Y69htn_ybzFiRZR_U3Vf8Bv4Nh6D6TBPWa5VmGs',
// url: apiUrl
// }
// })
// .then((res) => {
// console.log(res)
// this.$refs.player.src = res.data
// })
// .catch((error) => {
// console.log(error)
// })
// }
}
}
script>
<style>
style>