77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
|
import Container from "@/components/Container.vue";
|
|
import audioManager, { audioFils } from "@/audioManager";
|
|
|
|
const loaded = ref({});
|
|
|
|
const playAudio = (key) => {
|
|
audioManager.play(key);
|
|
};
|
|
|
|
const onAudioLoaded = (key) => {
|
|
loaded.value = {
|
|
...loaded.value,
|
|
[key]: true,
|
|
};
|
|
};
|
|
|
|
onMounted(() => {
|
|
const loadedAudioKeys = uni.getStorageSync("loadedAudioKeys") || {};
|
|
loaded.value = loadedAudioKeys;
|
|
|
|
uni.$on("audioLoaded", onAudioLoaded);
|
|
void audioManager.initAudios();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
uni.$off("audioLoaded", onAudioLoaded);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Container title="音频测试">
|
|
<view class="container">
|
|
<view>
|
|
<text>连续播放1</text>
|
|
<button hover-class="none" @click="playAudio(['第一轮', '请蓝方射箭'])">
|
|
播放
|
|
</button>
|
|
</view>
|
|
<view>
|
|
<text>连续播放2</text>
|
|
<button hover-class="none" @click="playAudio(['第二轮', '请红方射箭'])">
|
|
播放
|
|
</button>
|
|
</view>
|
|
<view v-for="key in Object.keys(audioFils)" :key="key">
|
|
<text>{{ key }}</text>
|
|
<text>{{ loaded[key] ? "已加载" : "未加载" }}</text>
|
|
<button hover-class="none" @click="playAudio(key)">
|
|
{{ loaded[key] ? "播放" : "加载并播放" }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</Container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
.container > view {
|
|
width: calc(100% - 50rpx);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 25rpx;
|
|
color: #fff;
|
|
border-bottom: 1rpx solid #fff9;
|
|
}
|
|
.container > view > button {
|
|
color: #fff;
|
|
}
|
|
</style>
|