vue播放mp3实现
1.在main.js中注册全局vue:mp3vue2.在app.vue引入组件:<mp3vue/>3.在需要调用的地方调用组件方法:this.mp3vue.mp3play(1)4.组件代码:<template><div class="listen"><!-- 语音播放功能 --><div ><!--...
1.在main.js中注册全局vue:mp3vue
2.在app.vue引入组件:<mp3vue/>
3.在需要调用的地方调用组件方法:this.mp3vue.mp3play(1)
4.组件代码:
<template>
<div class="listen">
<!-- 语音播放功能 -->
<div >
<!-- <input type="button" id="tts_btn" @click="myplay(0)" value="播放"> -->
</div>
<div id="bdtts_div_id">
<audio id="successpay" autoplay="autoplay">
<source id="tts_source_id" src="../image/SuccessPay.mp3" type="audio/mpeg">
</audio>
<audio id="failpay" autoplay="autoplay">
<source id="tts_source_id" src="../image/FailPay.mp3" type="audio/mpeg">
</audio>
</div>
</div>
</template>
<script>
export default {
name: 'myplaymp3',
data () {
return {
}
},
methods: {
myplay(action){
console.log("#mp3pay")
switch (action){
case 1:
var ttsAudio = document.getElementById('successpay');
ttsAudio.play();
break;
case 0:
var ttsAudio = document.getElementById('failpay');
ttsAudio.play();
break;
default:
break;
}
}
}
}
</script>
<style>
.listen
{
position:fixed;
right:10px;
bottom:10px;
// top:20px;
z-index:9999;
}
</style>
更多推荐
所有评论(0)