人们不太看重自己的力量——这就是他们软弱的原因。——高尔基
播放音频的代码很简单：
1
2
3
| const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = '/imgs/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav';
innerAudioContext.play();
|
官方文档：
https://uniapp.dcloud.io/api/media/audio-context
除了播放、暂停、停止等也都能实现
完整代码：
1
2
3
4
5
6
7
8
9
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <template>
<view class="content">
<image :class="{ widther: play }" class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
<navigator :class="{ widther: play }" url="/pages-user/list">user-list</navigator>
<navigator :class="{ widther: play }" url="/pages-news/list">news-list</navigator>
<view>{{ val }}</view>
<view @tap="parentEvent"><view @tap.stop="childEvent">触发触发</view></view>
<view @tap="parentEvent"><view @touchend="childEvent">触发触发</view></view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
play: false,
val: 0
};
},
onLoad() {
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = '/imgs/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav';
innerAudioContext.play();
setTimeout(() => (this.play = true), 1000);
uni.$on('add', this.add);
},
methods: {
add(e) {
console.log('主页的add被触发了！: ', e);
this.val += e.data;
},
parentEvent(e) {
console.log('parentEvent');
},
childEvent(e) {
console.log('childEvent');
e.stopPropagation();
}
}
};
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 0;
width: 0;
/* #ifndef APP-PLUS-NVUE */
transition: all 1s;
/* #endif */
/* #ifdef APP-PLUS-NVUE */
transition: width, height 1s;
/* #endif */
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.widther {
width: 200rpx;
height: 200rpx;
}
</style>
|