注意
uniapp API 中 uni.createInnerAudioContext()是無法多音頻播放的 如果我們想同時播放 加上ambient（不中止其他聲音播放，不能后臺播放，靜音后無聲音）這個屬性，我做的這個是用uniapp開發(fā)的一個安卓端的殼包，正常h5用MP3，WMA或者MPEG等格式的音頻都是可以的，但在安卓端手機測試需要使用MP3格式的音頻，否則會沒有聲音。
效果圖
主要代碼
首先全局定義播放器
// 定義全局播放器
var musicSelect = null;
musicSelect = uni.createInnerAudioContext(); //創(chuàng)建時間選擇播放器對象 選擇時間播放機械聲
/*
"ambient" - 不中止其他聲音播放，不能后臺播放，靜音后無聲音；
"soloAmbient" - 中止其他聲音播放，不能后臺播放，靜音后無聲音；
"playback" - 中止其他聲音，可以后臺播放，靜音后有聲音。
*/
musicSelect.sessionCategory = "ambient"
musicSelect.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/trim.mp3";
var music = null;
music = uni.createInnerAudioContext(); //創(chuàng)建雨林鳥播放器對象
// music.sessionCategory = "ambient"
music.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/yu-music.mp3";
這是我隨便寫的樣式 點擊對應(yīng)文字切換文章來源：http://www.zghlxwxcb.cn/news/detail-505801.html
<!-- 雨 林 鳥 播放音樂 -->
<view class="music" v-if="windowSteep>0&&isShowMusic">
<view class="music-flex" v-for="(item, index) in musicList" :key="index" @click="musicClick(item, index)">
<image class="music-img" :src="getMusic(item)" mode="widthFix"></image>
<view class="yuanq" :class="{'yuanq-red': item.isPlay}"></view>
</view>
</view>
這是methods中的點擊事件 點擊播放和暫停文章來源地址http://www.zghlxwxcb.cn/news/detail-505801.html
// 點擊雨林鳥播放或者暫停音樂
musicClick(item,index) {
// isPlay控制是否選中的狀態(tài)
this.musicList.filter(e => {
if(e.id !== item.id) {
e.isPlay = false
} else {
e.isPlay = !e.isPlay
}
})
music.src = item.music;
// 如果isPaly為true則播放當前音樂 暫停其他音樂
if(item.isPlay) {
// 播放
music.play()
music.onEnded(() => {
//播放結(jié)束 循環(huán)播放
music.play()
});
} else {
// 暫停
music.pause()
}
},
放上所有的代碼
<template>
<view class="pages" @click="windowClick">
<view v-if="!isShareShow" class="content animated">
<view @click="showCansel">
<image class="bg1" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/bj1.png" mode="aspectFit"></image>
<image class="bg2" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/bj2.png" mode="aspectFit"></image>
<!-- 左側(cè)菜單欄按鈕 -->
<view class="icon" v-if="!isStart">
<u-icon name="list" color="#333333" size="28" @click="iconClick"></u-icon>
</view>
<!-- 香 -->
<view class="sticks">
<view class="sticks-time" :style="'height:'+progress+'rpx'">
<template v-if="isStart">
<image class="vector" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/yan.gif" mode="widthFix"></image>
<image class="light" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/Rectangle.gif" mode="aspectFit"></image>
</template>
</view>
<view class="sticks-end"></view>
<image class="group" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/Group.png"></image>
</view>
</view>
<!-- 分秒倒計時展示 -->
<view class="time" :style="'marginTop:'+timeTop+'rpx'" >
<view class="t-width" @click="countClick" :class="{'animated fadeInDown': isStart,'animated fadeInUp': isCancel}">
<u-count-down
ref="countDown"
:time="time"
format="mm:ss"
:autoStart="false"
millisecond
@change="timeChange"
></u-count-down>
</view>
</view>
<view class="click-start" @click="openInfo" v-if="!isStart">
開始
</view>
<view class="click-start" @click="cancelInfo" v-if="isCancel">
放棄
</view>
<!-- 選擇專注時長組件 -->
<u-picker
:show="show"
title="專注時長"
ref="uPicker"
:columns="columns"
@confirm="confirm"
@cancel="cancel"
@change="changeHandler"
confirmColor="#000000"
immediateChange
></u-picker>
<audio id="audio" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/trim.mp3"/>
<!-- 左側(cè)菜單欄 -->
<left-menu ref="leftOpen" :userData="userData"></left-menu>
<!-- 會員彈窗提示 -->
<super-popup ref="superPopup" :userData="userData" @experience="openInfo"></super-popup>
<!-- 雨 林 鳥 播放音樂 -->
<view class="music" v-if="windowSteep>0&&isShowMusic">
<view class="music-flex" v-for="(item, index) in musicList" :key="index" @click="musicClick(item, index)">
<image class="music-img" :src="getMusic(item)" mode="widthFix"></image>
<view class="yuanq" :class="{'yuanq-red': item.isPlay}"></view>
</view>
</view>
</view>
<!-- 打卡完成的圖片展示 -->
<view class="share animated" :class="{'fadeIn': isShareShow }" v-if="isShareShow">
<image class="image2" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/cha.png" @click="closedShare"></image>
<view style="height: 180rpx;"></view>
<view class="image" id="htmlCanvas">
<view class="canval-text">
<view class="yanyu">{{chanyu}}</view>
</view>
<view class="author">{{auther}}</view>
<view style="width: 361rpx;"></view>
</view>
<!-- 下載圖片 -->
<image @click="renderScript.emitData" class="image3" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/xiazai.png"></image>
</view>
</view>
</template>
<script>
import superPopup from '@/components/super-popup/super-popup.vue'
// 定義全局播放器
var musicSelect = null;
musicSelect = uni.createInnerAudioContext(); //創(chuàng)建時間選擇播放器對象 選擇時間播放機械聲
/*
"ambient" - 不中止其他聲音播放，不能后臺播放，靜音后無聲音；
"soloAmbient" - 中止其他聲音播放，不能后臺播放，靜音后無聲音；
"playback" - 中止其他聲音，可以后臺播放，靜音后有聲音。
*/
musicSelect.sessionCategory = "ambient"
musicSelect.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/trim.mp3";
var music = null;
music = uni.createInnerAudioContext(); //創(chuàng)建雨林鳥播放器對象
// music.sessionCategory = "ambient"
music.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/yu-music.mp3";
export default {
components: {
superPopup
},
data() {
return {
windowSteep:10,//窗口未點擊事件數(shù)
windowTime:null,//窗口點擊的時間
timeTop:154,//點擊開始時間數(shù)字的上邊距
timeTwo:null,//點擊開始時間數(shù)字的動畫
musicList: [
{
id: 1,
isPlay: true, //是否播放雨林鳥音樂
black: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/yu-black.png',
grey: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/yu-g.png',
music: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/yu-music.mp3'
},
{
id: 2,
isPlay: false,
black: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/lin-black.png',
grey: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/lin-g.png',
music: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/lin-music.mp3'
},
{
id: 3,
isPlay: false,
black: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/niao-black.png',
grey: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/niao-g.png',
music: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/niao-music.mp3'
}
], //雨林鳥未播放圖標地址
musicIndex: 0,
show: false,
columns: [
[5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105,110,115,120],
[
'00','01','02','03','04','05','06','07','08','09','10',
'11','12','13','14','15','16','17','18','19','20',
'21','22','23','24','25','26','27','28','29','30',
'31','32','33','34','35','36','37','38','39','40',
'41','42','43','44','45','46','47','48','49','50',
'51','52','53','54','55','56','57','58','59',]
],
minute: 0,
second: 0,
time: 900000, //展示的分鐘和秒
indexs: [],
progress: 400, //進度條高度
isStart: false, //其他操作按鈕是否隱藏
isShareShow: false, //下載圖片頁面 是否展示
isCancel: false, //放棄 按鈕 是否顯示
isShowMusic: false, //是否顯示音樂按鈕
chanyu: '',
auther: '',
id: '',
userData:{}
}
},
onShow(){
this.userData = uni.getStorageSync('userData')
},
onUnload() {
if(this.windowTime){
clearInterval(this.windowTime)
}
},
computed: {
/*
@param {Number} index 當前音樂索引 0代表'雨', 1'林', 2'鳥'
動態(tài)展示對應(yīng)的文字的圖片（已選擇和未選擇的音樂）
*/
getMusic() {
return (item) => {
if(item.isPlay) {
return item.black
} else {
return item.grey
}
}
}
},
methods: {
/*
如果windowSteep = 10表表示屏幕剛點擊完的狀態(tài)，
十秒之后音樂選擇自動關(guān)閉，
如果屏幕點擊則再次初始化為10，重新開始計時
*/
windowClick(){
if(!this.isStart){
return
}
if(this.windowTime){
clearInterval(this.windowTime)
}
this.windowSteep = 10
this.windowTime = setInterval(()=>{
this.windowSteep--
if(this.windowSteep<=0){
clearInterval(this.windowTime)
}
},1000)
},
// 點擊彈出時間選擇
countClick() {
if(!this.isStart) {
this.show = true
}
},
// 點擊屏幕
showCansel() {
// 如果時間開始倒數(shù) 點擊屏幕則顯示放棄按鈕
if(this.isStart) {
this.timeTop = 154
this.isCancel = true
}
},
// 點擊放棄按鈕
cancelInfo() {
// this.time = 900000 //初始默認值
this.$refs.countDown.pause();
this.$refs.countDown.reset();
this.isShowMusic = false
music.pause()
this.musicList[1].isPlay = false
this.musicList[2].isPlay = false
this.isStart = false
this.isCancel = false
clearInterval(this.windowTime)
},
// 點擊開始
openInfo(val){
if(uni.getStorageSync('token') === '') {
uni.showToast({
icon:"none",
title:"請先登錄！"
})
setTimeout(() => {
uni.navigateTo({
url: '/pages/login/login'
})
},1000)
return
}
this.$http.get("/common/user/info").then(res=>{
uni.setStorageSync('userData',res.data)
this.userData = res.data
})
// valid_end會員結(jié)束時間
let valid_end = new Date(this.userData.valid_end)
let date = new Date()
if(valid_end.getTime() < date.getTime() || !this.userData.valid_end){
// 彈出會員非會員彈窗 非體驗
if(val != 'experience'){
this.$refs.superPopup.open()
return
}
}
// 顯示音樂按鈕 并默認開始播放雨音效
this.musicList.filter(e => {
if(e.id === 1) {
e.isPlay = true
} else {
e.isPlay = false
}
})
this.isShowMusic = true
music.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/yu-music.mp3";
music.play()
music.onEnded(() => {
//播放結(jié)束 循環(huán)播放
music.play()
});
this.isStart = true
this.timeTop = 154
this.timeTwo = setInterval(()=>{
this.timeTop+=5
if(this.timeTop>=256){
clearInterval(this.timeTwo)
}
},20)
// this.windowClick()
this.$refs.countDown.start();
},
// 監(jiān)聽倒計時change
timeChange(e) {
// 計算百分比
let all = (e.hours * 60 * 60 * 1000) + (e.minutes * 60 * 1000) + (e.seconds * 1000)
let a = this.time;
let b = Number(all)/Number(a);
let c = b * 400
this.progress = c.toFixed()
if(this.progress == 0) {
this.isStart = false
this.isShareShow = true
this.time = 0
clearInterval(this.windowTime)
music.pause()
// 隨機獲取一條禪語
this.$http.get('/time/chanyu/random').then(res => {
if(res.code === 0) {
this.id = res.data.id
this.chanyu = res.data.content
this.auther = res.data.name
// 打卡完成
this.$http.post('/time/record/add', {
chan_id: this.id,
status: 3, //1-已開始 2-暫停 3-完成 4-取消
time: (this.minute * 60) + this.second
}).then(res => {
if(res.code !== 1) {
uni.showToast({
icon: 'error',
title: res.msg
})
}
})
} else {
uni.showToast({
icon: 'none',
title: res.msg
})
}
})
}
},
// 監(jiān)聽變化 播放音效
changeHandler(e) {
this.indexs = e.indexs
musicSelect.play(); //執(zhí)行播放
},
// 回調(diào)參數(shù)為包含columnIndex,value,values
confirm(e) {
musicSelect.pause()
this.minute = e.value[0]
this.second = Number(e.value[1])
this.time = (this.minute * 60 * 1000) + (this.second * 1000)
this.show = false
},
cancel() {
musicSelect.pause()
this.show = false
},
// 左側(cè)菜單欄彈出
iconClick() {
this.$refs.leftOpen.open()
},
// 關(guān)閉圖片展示
closedShare() {
this.timeTop = 154
this.progress = 400
this.isShareShow = false
this.isCancel = false
this.isShowMusic = false
music.pause()
// this.time = 900000 //初始默認值
this.time = (this.minute * 60 * 1000) + (this.second * 1000)
this.$http.get("/common/user/info").then(res=>{
uni.setStorageSync('userData',res.data)
this.userData = res.data
})
},
// 畫出圖片并保存到本地相冊
receiveRenderData(val) {
uni.showLoading({
title:"下載中"
})
let that=this
let base64 = val
const bitmap = new plus.nativeObj.Bitmap("test");
bitmap.loadBase64Data(base64, function() {
const url = "_doc/" + new Date().getTime() + ".png"; // url為時間戳命名方式
bitmap.save(url, {
overwrite: true, // 是否覆蓋
// quality: 'quality' // 圖片清晰度
}, (i) => {
uni.saveImageToPhotosAlbum({
filePath: i.target,
success: function() {
uni.hideLoading()
uni.showToast({
title: '圖片保存成功',
icon: 'none'
})
bitmap.clear()
}
});
}, (e) => {
uni.hideLoading()
uni.showToast({
title: '圖片保存失敗',
icon: 'none'
})
bitmap.clear()
});
}, (e) => {
uni.hideLoading()
uni.showToast({
title: '圖片保存失敗',
icon: 'none'
})
bitmap.clear()
});
},
// 點擊雨林鳥播放或者暫停音樂
musicClick(item,index) {
// isPlay控制是否選中的狀態(tài)
this.musicList.filter(e => {
if(e.id !== item.id) {
e.isPlay = false
} else {
e.isPlay = !e.isPlay
}
})
music.src = item.music;
// 如果isPaly為true則播放當前音樂 暫停其他音樂
if(item.isPlay) {
// 播放
music.play()
music.onEnded(() => {
//播放結(jié)束 循環(huán)播放
music.play()
});
} else {
// 暫停
music.pause()
}
},
}
}
</script>
<script module="renderScript" lang="renderjs">
import html2canvas from '@/util/html2canvas.js';
export default {
data() {
return {
}
},
mounted() {},
methods: {
// 發(fā)送數(shù)據(jù)到邏輯層
emitData(e, ownerVm) {
const dom = document.getElementById('htmlCanvas')
html2canvas(dom, {
width: dom.clientWidth, //dom 原始寬度
height: dom.clientHeight,
scrollY: 0, // html2canvas默認繪制視圖內(nèi)的頁面，需要把scrollY，scrollX設(shè)置為0
scrollX: 0,
dpi:300,
useCORS: true, //支持跨域，但好像沒什么用
allowTaint: false
}).then((canvas) => {
// 將生產(chǎn)的canvas轉(zhuǎn)為base64圖片3
ownerVm.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
});
}
}
};
</script>
<style lang="scss" scoped>
.pages{
height: 100vh;
overflow: hidden;
}
.hidden {
display:none
}
.content {
// position: relative;
// margin: 0;
height: 100vh;
position: absolute;
left: 0;
right: 0;
}
.bg1 {
position: absolute;
top: 0;
right: 0;
}
.bg2 {
position: absolute;
height: 1000rpx;
left: 0;
bottom: 0;
z-index: 0;
}
.icon {
position: absolute;
top: 90rpx;
left: 50rpx;
z-index: 99;
}
.sticks {
position: relative;
height: calc(100vh - 450rpx);
.sticks-time {
position: absolute;
left: 50%;
bottom: 136rpx;
transform: translate(-50%);
height: 400rpx;
width: 12rpx;
background: #000000;
border-radius: 90rpx;
z-index: 20;
.vector {
position: absolute;
top: -260rpx;
left: 50%;
transform: translate(-62%);
width: 172rpx;
height: 452rpx;
z-index: 30;
}
.light {
position: absolute;
top: -18rpx;
width: 12rpx;
height: 20rpx;
z-index: 30;
}
}
.sticks-end {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%);
width: 4rpx;
height: 150rpx;
background: #333333;
border-radius: 90rpx;
z-index: 10;
}
.group {
position: absolute;
left: 50%;
bottom: -76rpx;
transform: translate(-50%);
width: 354rpx;
height: 144rpx;
}
}
.time {
position: relative;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
margin-top: 156rpx;
.t-width {
width: 300rpx;
}
}
.m-t-264 {
margin-top: 264rpx;
}
.m-t-156 {
margin-top: 156rpx;
}
/deep/ .u-count-down .u-count-down__text{
font-style: normal;
font-weight: 900;
font-size: 60rpx;
line-height: 48rpx;
text-align: center;
letter-spacing: 0.2em;
color: #000000;
}
.click-start {
margin: 0 auto;
text-align: center;
font-style: normal;
font-weight: 400;
font-size: 32rpx;
line-height: 48rpx;
letter-spacing: 0.2em;
color: #FFFFFF;
background-position: 36rpx;
background-image: url('https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/start-bg.png');
background-size: 419rpx 80rpx;
width: 419rpx;
height: 80rpx;
background-repeat: no-repeat;
padding-top: 10rpx;
margin-top: 60rpx;
position: relative;
z-index: 50;
}
.share {
height: 100vh;
// box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
// position: absolute;
// z-index: 999;
.image {
width: 722rpx;
height: 552rpx;
padding: 90rpx 76rpx 38rpx;
box-sizing: border-box;
background: url('https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/crad_img.png');
background-size: 100% 100%;
box-shadow: 0 6rpx 13rpx 0 rgba(0,0,0,0.08);
position: relative;
}
.m-t-88 {
margin-top: 162rpx;
}
.image2 {
position: absolute;
top: 60rpx;
right: 40rpx;
width: 44rpx;
height: 44rpx;
}
.image3 {
position: absolute;
left: 50%;
bottom: 150rpx;
transform: translate(-50%);
width: 132rpx;
height: 132rpx;
}
.canval-text {
width: 361rpx;
font-size: 32rpx;
font-weight: 900;
color: #414141;
line-height: 50rpx;
writing-mode:vertical-lr;
letter-spacing: 4rpx;
.yanyu {
height: 220rpx;
}
}
.author {
font-size: 32rpx;
font-weight: 900;
color: #414141;
line-height: 50rpx;
writing-mode:vertical-lr;
letter-spacing: 6rpx;
position: absolute;
bottom: 36rpx;
right: 53%;
}
}
.music {
position: absolute;
right: 0;
bottom: 50%;
transform: translate(-50%);
height: 214rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.w-picker-view{
width: 100rpx;
}
.music-flex {
display: flex;
align-items: center;
.music-img {
width: 36rpx;
height: 36rpx;
}
}
.yuanq {
margin-left: 14rpx;
width: 19rpx;
height: 19rpx;
background: #FFFFFF;
border-radius: 50%;
border: 2rpx solid #EDEDED;
}
.yuanq-red {
border: 2rpx solid #C24229;
}
}
</style>
<style>
page {
position: relative;
background: #EAEAEA;
}
</style>
到了這里，關(guān)于uniapp使用uni.createInnerAudioContext()播放指定音頻并且切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
