添加声音
This commit is contained in:
93
src/audioManager.js
Normal file
93
src/audioManager.js
Normal file
@@ -0,0 +1,93 @@
|
||||
const audioFils = {
|
||||
第一轮:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblu6fl26qrspvy79.mp3",
|
||||
第二轮:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblu6fehshrpe5ook.mp3",
|
||||
第三轮:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblu6fgbz3iimk7yy.mp3",
|
||||
第四轮:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblu6fjwf50tlxxbi.mp3",
|
||||
第五轮:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblu6fg63lqrslhm7.mp3",
|
||||
决金箭轮:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblu6fhjycwubbwil.mp3",
|
||||
请蓝方射击:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblu6fr0zpluiabph.mp3",
|
||||
请红方射击:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblu6fu169yerpwey.mp3",
|
||||
中场休息:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblu6fug8faqrbtwd.mp3",
|
||||
比赛结束:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblsdl717ilr0b3o0.mp3",
|
||||
比赛开始:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbblsdl7qlkqgvthfr.mp3",
|
||||
请开始射击:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbljrfx5guqt5oulk.mp3",
|
||||
未上靶:
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbkxm60bul0khcoqq.mp3",
|
||||
"1环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbklufj59qmdo96ha.mp3",
|
||||
"2环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbklufogy49ousbv4.mp3",
|
||||
"3环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbklufl3hhijeasck.mp3",
|
||||
"4环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbklufo8vo7k6jxdz.mp3",
|
||||
"5环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbklkzq7lrbfpr6ij.mp3",
|
||||
"6环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbkll0fw7hbmmhxkl.mp3",
|
||||
"7环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbkll0fkirkanghmf.mp3",
|
||||
"8环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbkll0cly2noykieg.mp3",
|
||||
"9环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbkll0gsuumekhpkn.mp3",
|
||||
"10环":
|
||||
"https://api.shelingxingqiu.com/attachment/2025-07-14/dbbklgw2dk22ek7qha.mp3",
|
||||
};
|
||||
|
||||
class AudioManager {
|
||||
constructor() {
|
||||
this.audioMap = new Map();
|
||||
Object.keys(audioFils).forEach((key) => {
|
||||
const audio = uni.createInnerAudioContext();
|
||||
audio.src = audioFils[key];
|
||||
audio.autoplay = false;
|
||||
|
||||
// 监听加载状态
|
||||
audio.onCanplay(() => {
|
||||
console.log(`音频 ${key} 已加载完成`);
|
||||
});
|
||||
|
||||
audio.onError((res) => {
|
||||
console.log(`音频 ${key} 加载失败:`, res.errMsg);
|
||||
});
|
||||
|
||||
this.audioMap.set(key, audio);
|
||||
});
|
||||
}
|
||||
|
||||
// 播放指定音频
|
||||
play(key) {
|
||||
const audio = this.audioMap.get(key);
|
||||
if (audio) audio.play();
|
||||
}
|
||||
|
||||
// 停止指定音频
|
||||
stop(key) {
|
||||
const audio = this.audioMap.get(key);
|
||||
if (audio) audio.stop();
|
||||
}
|
||||
|
||||
// 销毁所有音频实例
|
||||
destroyAll() {
|
||||
this.audioMap.forEach((audio) => {
|
||||
audio.destroy();
|
||||
});
|
||||
this.audioMap.clear();
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例
|
||||
export default new AudioManager();
|
||||
@@ -1,5 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onUnmounted } from "vue";
|
||||
import audioManager from "@/audioManager";
|
||||
import { MESSAGETYPES } from "@/constants";
|
||||
const props = defineProps({
|
||||
start: {
|
||||
type: Boolean,
|
||||
@@ -17,22 +19,44 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
onTimeIsUp: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const barColor = ref("#fed847");
|
||||
const remain = ref(props.total);
|
||||
const timer = ref(null);
|
||||
const sound = ref(true);
|
||||
const currentSound = ref("");
|
||||
const currentRound = ref(0);
|
||||
const currentRoundEnded = ref(true);
|
||||
|
||||
watch(
|
||||
() => props.tips,
|
||||
(newVal) => {
|
||||
if (newVal.includes("红队")) barColor.value = "#FF6060";
|
||||
if (newVal.includes("蓝队")) barColor.value = "#5FADFF";
|
||||
let key = "";
|
||||
if (newVal.includes("红队")) {
|
||||
barColor.value = "#FF6060";
|
||||
key = "请红方射击";
|
||||
}
|
||||
if (newVal.includes("蓝队")) {
|
||||
barColor.value = "#5FADFF";
|
||||
key = "请蓝方射击";
|
||||
}
|
||||
if (key && sound.value) {
|
||||
if (currentRoundEnded.value) {
|
||||
currentRound.value += 1;
|
||||
currentRoundEnded.value = false;
|
||||
if (currentRound.value === 1) audioManager.play("第一轮");
|
||||
if (currentRound.value === 2) audioManager.play("第二轮");
|
||||
if (currentRound.value === 3) audioManager.play("第三轮");
|
||||
if (currentRound.value === 4) audioManager.play("第四轮");
|
||||
if (currentRound.value === 5) audioManager.play("第五轮");
|
||||
setTimeout(() => {
|
||||
audioManager.play(key);
|
||||
}, 1000);
|
||||
} else {
|
||||
audioManager.play(key);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
@@ -45,11 +69,7 @@ watch(
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
remain.value = props.total;
|
||||
timer.value = setInterval(() => {
|
||||
if (remain.value > 0) {
|
||||
remain.value--;
|
||||
} else {
|
||||
props.onTimeIsUp();
|
||||
}
|
||||
if (remain.value > 0) remain.value--;
|
||||
}, 1000);
|
||||
}
|
||||
);
|
||||
@@ -62,15 +82,9 @@ watch(
|
||||
}
|
||||
if (newVal) {
|
||||
remain.value = props.total;
|
||||
// setTimeout(() => {
|
||||
timer.value = setInterval(() => {
|
||||
if (remain.value > 0) {
|
||||
remain.value--;
|
||||
} else {
|
||||
props.onTimeIsUp();
|
||||
}
|
||||
if (remain.value > 0) remain.value--;
|
||||
}, 1000);
|
||||
// }, 3000);
|
||||
} else {
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
}
|
||||
@@ -84,20 +98,59 @@ const updateRemain = (value) => {
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
remain.value = Math.floor(value);
|
||||
timer.value = setInterval(() => {
|
||||
if (remain.value > 0) {
|
||||
remain.value--;
|
||||
} else {
|
||||
props.onTimeIsUp();
|
||||
}
|
||||
if (remain.value > 0) remain.value--;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const updateSound = () => {
|
||||
sound.value = !sound.value;
|
||||
if (!sound.value) audioManager.stop(currentSound.value);
|
||||
};
|
||||
|
||||
async function onReceiveMessage(messages = []) {
|
||||
if (!sound.value) return;
|
||||
messages.forEach((msg) => {
|
||||
if (
|
||||
msg.constructor === MESSAGETYPES.ShootSyncMeArrowID ||
|
||||
msg.constructor === MESSAGETYPES.ShootResult
|
||||
) {
|
||||
if (msg.target) {
|
||||
currentSound.value = msg.target.ring
|
||||
? `${msg.target.ring}环`
|
||||
: "未上靶";
|
||||
audioManager.play(currentSound.value);
|
||||
}
|
||||
} else if (msg.constructor === MESSAGETYPES.AllReady) {
|
||||
audioManager.play("比赛开始");
|
||||
} else if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
|
||||
audioManager.play("比赛开始");
|
||||
} else if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
|
||||
currentRoundEnded.value = true;
|
||||
} else if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
|
||||
audioManager.play("中场休息");
|
||||
} else if (msg.constructor === MESSAGETYPES.MatchOver) {
|
||||
audioManager.play("比赛结束");
|
||||
} else if (msg.constructor === MESSAGETYPES.FinalShoot) {
|
||||
audioManager.play("决金箭轮");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const playSound = (key) => {
|
||||
currentSound.value = key;
|
||||
audioManager.play(key);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("update-ramain", updateRemain);
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
uni.$on("play-sound", playSound);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
uni.$off("update-ramain", updateRemain);
|
||||
uni.$off("socket-inbox", onReceiveMessage);
|
||||
uni.$off("play-sound", playSound);
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
});
|
||||
</script>
|
||||
@@ -107,7 +160,7 @@ onUnmounted(() => {
|
||||
<view>
|
||||
<image src="../static/shooter.png" mode="widthFix" />
|
||||
<text>{{ start && remain === 0 ? "时间到!" : tips }}</text>
|
||||
<button hover-class="none" @click="() => (sound = !sound)">
|
||||
<button hover-class="none" @click="updateSound">
|
||||
<image
|
||||
:src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
|
||||
mode="widthFix"
|
||||
|
||||
@@ -126,6 +126,9 @@ const nextStep = async () => {
|
||||
scores.value = [];
|
||||
step.value = 4;
|
||||
start.value = true;
|
||||
setTimeout(() => {
|
||||
uni.$emit("play-sound", "请开始射击");
|
||||
}, 300);
|
||||
} else if (step.value === 5) {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
|
||||
@@ -33,6 +33,9 @@ const onReady = async () => {
|
||||
currentRound.value = 0;
|
||||
scores.value = [];
|
||||
start.value = true;
|
||||
setTimeout(() => {
|
||||
uni.$emit("play-sound", "请开始射击");
|
||||
}, 300);
|
||||
};
|
||||
|
||||
async function onReceiveMessage(messages = []) {
|
||||
|
||||
@@ -31,6 +31,9 @@ const onReady = async () => {
|
||||
if (result) practiseId.value = result.id;
|
||||
scores.value = [];
|
||||
start.value = true;
|
||||
setTimeout(() => {
|
||||
uni.$emit("play-sound", "请开始射击");
|
||||
}, 300);
|
||||
};
|
||||
|
||||
async function onReceiveMessage(messages = []) {
|
||||
|
||||
Reference in New Issue
Block a user