選擇不同的音頻，銷燬上一個音頻，播放最新的音頻文件。
效果圖：
音頻組件代碼:
<template>
<view id="share_card" class="share_card">
<view class="top">
<img class="ms" :class="[rotate ? 'zuan ms' : 'ms']" :src="ms_url" @click="click_v" />
<img class="head box boxshadow1" v-if="myCard.avatarOpen==1" :src="myCard.avatar || '../static/de_head.jpg'" />
<img class="head box boxshadow1" v-else src="../static/de_head.jpg" />
<view class="top_txt">
<view class="name">{{ myCard.name }}</view>
<view v-if="myCard.position" class="position">{{ myCard.position }}</view>
</view>
</view>
<view class="centent">
<view style="margin-left: 1.2em;">
<view class="centent_txt centent_txt_title" style="">{{ myCard.corpName }}</view>
<view class="centent_txt" v-if="myCard.mobileOpen">{{ myCard.mobile }}</view>
<view class="centent_txt" v-if="myCard.addressOpen">{{ myCard.address }}</view>
<img class="code" :src="myCard.qrCode" />
</view>
</view>
<!-- <view class="bottom_txt">讓您感受我的真心，請加我企業微信</view> -->
</view>
</template>
<script>
var that;
export default {
data() {
return {
innerAudioContext:'',
ms_url: '../static/ms.png',
rotate: true
};
},
props: ['music_play_status', 'myCard'],
watch: {
'myCard.backgroundMusicFileUrl'() {
console.log('backgroundMusicFileUrl', this.myCard.backgroundMusicFileUrl);
this.voicePaly()
},
music_play_status: function() {
console.log('music_play_status', this.music_play_status);
if(this.music_play_status){
this.voicePaly()
}else{
this.voiceClose()
}
}
},
created: function() {
console.log('1111111111111')
this.voicePaly();
},
methods: {
control_paly_status(){
},
click_v() {
if (this.rotate) {
this.voiceClose();
} else {
this.voicePaly();
}
},
voicePaly(loop=false) {
console.log('voicePaly------backgroundMusicFileUrl', this.myCard.backgroundMusicFileUrl);
if(this.innerAudioContext){
this.innerAudioContext.destroy();
}
this.innerAudioContext = uni.createInnerAudioContext()
this.innerAudioContext.autoplay = true;
if(loop)this.innerAudioContext.loop=true;
this.innerAudioContext.src = this.myCard.backgroundMusicFileUrl;
this.innerAudioContext.onPlay(() => {
console.log('開始播放');
});
console.log('22222222222222222',this.innerAudioContext)
this.rotate = true;
this.ms_url = '../static/ms.png';
},
voiceClose() {
if(this.innerAudioContext){
this.innerAudioContext.destroy();
}
this.rotate = false;
this.ms_url = '../static/no_ms.png';
}
},
mounted: function() {
that = this;
// setTimeout(function() {
// that.rotate = false
// }, 5000)
}
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
.share_card {
border: 1px solid #f5f5f5;
background-color: #f5f5f5;
position: relative;
}
.top {
position: relative;
top: 0;
width: 100%;
overflow: hidden;
}
.head {
width: 100%;
z-index: 0;
}
.zuan {
animation: rotate 6s linear infinite;
}
.top_txt {
position: absolute;
/* background-color: rgba(0,0,0,0.2); */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.3));
bottom: 0;
width: 100%;
color: white;
padding-left: 1em;
padding-top: 2.6em;
padding-bottom: 1em;
z-index: 1;
/* letter-spacing: 0.3em; */
}
img {
border: 0;
vertical-align: bottom;
}
.position {
/* letter-spacing: 0.2em; */
color: #e4e5e5;
font-size: 0.6em;
}
.name {
font-weight: 400;
font-size: 1.2em;
margin-top: 0.3em;
padding-bottom: 0.16em;
}
.ms {
position: absolute;
top: 1em;
right: 1em;
width: 1.4rem;
height: 1.4rem;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
/*從0度開始*/
}
100% {
transform: rotateZ(360deg);
/*360度結束*/
}
}
.sss {
position: absolute;
bottom: 0;
width: 100%;
}
.code {
width: 5em;
height: 5em;
/* -moz-box-shadow: 0em 0.1em 1em #bfbfbf;
-webkit-box-shadow: 0em 1em 1em #bfbfbf;
box-shadow: 0em 0.1em 1em #bfbfbf; */
position: absolute;
right: 1em;
top: 1.1em;
}
.centent {
background-color: white;
position: relative;
/* background: url(https://jayjing.wang/h5_demo/img/logo_bg.png); */
background-size: 100%;
/* background-size: 80%; */
color: #474747;
height: 2.52em;
z-index: 2;
padding-bottom: 5em;
}
.logo {}
.bottom_txt {
color: #bfbfbf;
position: relative;
text-align: center;
width: 100%;
/* height: ; */
z-index: 0;
}
.centent_txt {
margin-bottom: 0.2em;
font-size: 0.9em;
width: 60%;
}
.centent_txt_title {
padding-top: 1.2em;
font-weight: 600;
}
.lou_b {
position: absolute;
bottom: 0;
width: 80%;
left: 10%;
z-index: 0;
}
</style>
使用音頻代碼：
<template>
<view class="select_template">
<view class="component_shareCard">
<shareCard v-if="template_idx==0" style="transform: scale(0.93);" :myCard="myCard" :music_play_status="music_play_status" v-on:increment="appAddCounter"></shareCard>
<shareCard2 v-if="template_idx==1" style="transform: scale(0.75);margin-top: -120upx;margin-bottom: -160upx;margin-left: -40upx;" v-bind:bg_idx="bg_idx" v-on:increment="appAddCounter"></shareCard2>
</view>
<view class="list">
<view class="">
<view class="list_item">
<view class="list_item_title">選擇模板</view>
<view class="p_r">
<image
v-for="(item, index) in template_list"
:key="index"
@click="click_idx"
:id="index"
data-type="template"
:class="{ border_idx: template_idx == index }"
:src="item.previewUrl"
class="xz_tem_img_item"
></image>
</view>
</view>
<view class="list_item">
<view class="list_item_title">背景</view>
<view class="p_r">
<image
v-for="(item, index) in bg_list"
:key="index"
@click="click_idx"
data-type="bg"
:id="index"
:class="{ border_idx: bg_idx == index }"
:src="item.picUrl"
class="xz_tem_img_item"
></image>
</view>
</view>
<view class="list_item" v-if="template_idx==0">
<view class="list_item_title">選擇音樂</view>
<view class="p_r " style="display: flex; flex-wrap:wrap">
<view
class="music_item"
v-for="(item, index) in music_list"
:key="index"
@click="click_idx"
:id="index"
data-type="music"
:class="[music_idx == index ? 'border_idx' : 'border_no_idx']"
>
<image :src="item.picUrl" class="music_item_icon"></image>
{{ item.musicName }}
</view>
</view>
</view>
</view>
<view class="list_btn">
<view class="list_item_btn" @click="nav_back">取消</view>
<view class="list_item_btn" @click="click_updateTemplate">完成</view>
</view>
</view>
</view>
</template>
<script>
import shareCard from '../../../components/share_card.vue';
import shareCard2 from '../../../components/share_card2.vue';
import API from '../../../utils/api.js';
export default {
data() {
return {
menuName: '',
musciFileUrl: '',
music_play_status: true,
music_play:0,
select_bg_status: 0,
select_music_status: 0,
template_list: [],
bg_list: [],
music_list: [],
backgroundId:'',
musicId:'',
template_idx: 0,
bg_idx: 0,
music_idx: 0,
music: 0,
myCard: {}
};
},
components: { shareCard,shareCard2 },
onLoad(options) {
let that = this;
console.log('edit_business_card- options', options);
this.myCard = JSON.parse(options.myCard);
API.getTemplateList({}).then(res => {
if (res.success) {
this.template_list = res.module;
this.get_bg(res.module[0].templateId);
}
});
},
methods: {
nav_back(){
// 在C頁面內 navigateBack，將返回A頁面
uni.navigateBack({
delta: 1
});
},
click_updateTemplate(){
var data={
templateId:this.template_list[this.template_idx].templateId,
backgroundId:this.backgroundId,
musicId:this.musicId,
}
API.updateTemplate(data).then(res => {
if (res.success) {
uni.setStorageSync('templateSave', data);
uni.showToast({
title: '保存成功！',
duration: 1500
});
setTimeout(()=>{
uni.navigateTo({
url: '/pages/share/my_card/my_card'
});
},1500)
}
});
},
get_bg(templateId) {
API.getBacgList({ templateId }).then(res => {
if (res.success) {
this.bg_list = res.module;
}
});
API.getMusicList({ templateId }).then(res => {
if (res.success) {
this.music_list = res.module;
}
});
},
click_idx(e) {
var type = e.currentTarget.dataset.type;
console.log('type', type);
if (type == 'music') {
if(e.target.id==this.music_idx){
return
}
this.music_idx = e.target.id;
this.musciFileUrl = this.music_list[e.target.id].fileUrl;
this.myCard.backgroundMusicFileUrl = this.music_list[e.target.id].fileUrl;
this.musicId=this.music_list[e.target.id].id;
this.music_play=this.music_play+1;
console.log('click_bg_idx', e.target.id, this.musciFileUrl);
} else if (type == 'bg') {
this.bg_idx = e.target.id;
this.backgroundId=this.bg_list[e.target.id].id;
console.log('click_music_idx', e.target.id);
} else if (type == 'template') {
this.template_idx = e.target.id;
console.log('click_template_idx', e.target.id);
if(this.template_idx==0){
this.music_play_status=true;
}else{
this.music_play_status=false;
}
this.get_bg(this.template_list[e.target.id].templateId);
this.bg_idx = 0;
this.music_idx = 0;
}
}
}
};
</script>
<style>
.p_r {
display: flex;
flex-direction: row;
}
.border_idx {
border: 1px solid #2e8ced;
}
.border_no_idx {
border: 1upx solid #d0d0d0;
}
.music_item {
padding: 10upx 30upx 10upx 30upx;
border-radius: 50upx;
font-size: 26upx;
color: #999999;
margin-right: 20upx;
white-space: nowrap;
position: relative;
}
.music_item_icon {
width: 26upx;
height: 26upx;
position: relative;
top: 6upx;
margin-right: 10upx;
}
.xz_tem_img_item {
width: 20%;
height: 100upx;
border-radius: 6upx;
margin-right: 20upx;
}
.select_template {
font-size: 32upx;
background-color: #f5f5f5;
width: 100%;
height: 100%;
}
.ttt {
}
.arrow {
top: 50%;
margin-top: -7upx;
position: absolute;
right: 10upx;
width: 14upx;
height: 25upx;
margin-right: 30upx;
}
.component_shareCard {
width: 70%;
padding-top: 40upx;
margin-bottom: 40upx;
height: 380px;
font-size: 32upx;
margin-left: 15%;
}
.list {
background-color: #ffffff;
position: relative;
top: 10upx;
width: 100%;
}
.list_item {
padding-bottom: 40upx;
border-bottom: 1px solid #f3f3f3;
margin-left: 5%;
margin-bottom: 10upx;
}
.list_item_btn {
flex: 1;
}
.p_r {
}
.list_item_title {
position: relative;
width: 95%;
padding-top: 10upx;
height: 70upx;
line-height: 70upx;
}
.list_btn {
text-align: center;
display: flex;
flex-direction: row;
color: #007aff;
height: 100upx;
line-height: 100upx;
}
</style>