uni-app 音频控制

选择不同的音频，销毁上一个音频，播放最新的音频文件。

效果图：

音频组件代码:

<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"><imagev-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"><imagev-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"><viewclass="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>

uni-app 音频控制相关推荐

Audio Unit: iOS中最底层最强大的音频控制API
阅读的前提: Audio Session基础(Audio Session) Core Audio基本数据结构(Core Audio) 音视频基础知识 C/C++ 简单数据结构,函数使用以下概念是文中 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
Android 开发中原始音频的录播和和自定义音频控制条的讲解及实战（超详细附源码）
需要源码请点赞关注收藏后评论区留下QQ~~~ 一.原始音频的录播语音通话功能要求实时传输,如果使用MediaRecorder与MediaPlayer组合,那么只能整句话都录完并编码好了才能传给对方去 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
linux alsa 音频管理,在Linux上的高级音频控制
Linux音频控制与Linux音频系统结构一样混乱. 长篇小说,经过多年的发展,默认的声音控制工具看起来像这样: 设置音量级别的默认和唯一选项可能对于大多数用户来说是足够的,但是当您想要设置特定音频级 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
android 如何去控制第三方音乐播放app之控制QQ音乐
最近在做一个需求,要在桌面去控制qq音乐的播放(即,可以播放暂停,上一曲,下一曲显示歌名和歌手名).接下来一一说下完成这个需求的心路历程. 1.在网上查腾讯有没有针对qq音乐提供SDK接口,结果发现, ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...

uni-app 音频控制

uni-app 音频控制相关推荐

最新文章

热门文章