|
|
@@ -1,6 +1,8 @@
|
|
|
<script setup lang="ts">
|
|
|
import { stat } from "fs";
|
|
|
import { kill } from "process";
|
|
|
+import { showToast } from "vant";
|
|
|
+import wx from "weixin-js-sdk";
|
|
|
|
|
|
// 播放状态
|
|
|
const state = ref(false);
|
|
|
@@ -73,7 +75,6 @@ const updateProgress2 = (moveX: number) => {
|
|
|
|
|
|
// 更新进度条（播放中）
|
|
|
const updateProgress = (e: any) => {
|
|
|
- console.log(e)
|
|
|
e.target.autoplay = true
|
|
|
const progressBar = document.getElementById("progressBar");
|
|
|
var value = e.target.currentTime / e.target.duration;
|
|
|
@@ -89,9 +90,48 @@ const updateProgress = (e: any) => {
|
|
|
|
|
|
const durationRef = ref(null);
|
|
|
|
|
|
+const formatePlayerDuration = (node: any) => {
|
|
|
+ node.onloadedmetadata = (e: any) => {
|
|
|
+ const audio = e.target;
|
|
|
+ const audioDuration = audio.duration;
|
|
|
+ if (audioDuration === Infinity) {
|
|
|
+ audio.currentTime = 1e101;
|
|
|
+ audio.ontimeupdate = () => {
|
|
|
+ audio.ontimeupdate = () => {
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ // 不重新设置currtTime,会直接触发audio的ended事件，因为之前将currentTime设置成了一个比音频时长还大的值。所以要将currentTime重置为初始状态。
|
|
|
+ // 注: 这里有一个问题，直接设置为0 是不起作用的。需要重新设置一下audio.currentTime = 1e101;然后再设置为
|
|
|
+ audio.currentTime = 1e101;
|
|
|
+ audio.currentTime = 0;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+// 计算音频的时长
|
|
|
+const countAudioTime = async () => {
|
|
|
+ var audio = document.getElementById("music1");
|
|
|
+
|
|
|
+ while (isNaN(audio!.duration) || audio!.duration === Infinity) {
|
|
|
+ // 延迟一会 不然网页都卡死
|
|
|
+ await new Promise((resolve) => setTimeout(resolve, 200));
|
|
|
+ // 设置随机播放时间，模拟调进度条
|
|
|
+ // audio!.currentTime = 10000000 * Math.random();
|
|
|
+ durationRef.value = timeToMinute(audio!.duration);
|
|
|
+ }
|
|
|
+ // showToast(audio!.duration);
|
|
|
+ // console.log("音频的总时长:", audio.duration);
|
|
|
+};
|
|
|
+
|
|
|
const getDuration = () => {
|
|
|
var audio = document.getElementById("music1");
|
|
|
- durationRef.value = timeToMinute(audio!.duration);
|
|
|
+ countAudioTime();
|
|
|
+ // formatePlayerDuration(audio)
|
|
|
+ setTimeout(() => {
|
|
|
+ durationRef.value = timeToMinute(audio!.duration);
|
|
|
+ // showToast(isNaN(audio!.duration), audio!.duration);
|
|
|
+ }, 100);
|
|
|
};
|
|
|
const timeToMinute = (times: any) => {
|
|
|
var t = "";
|
|
|
@@ -112,7 +152,6 @@ const timeToMinute = (times: any) => {
|
|
|
};
|
|
|
|
|
|
const clear = () => {
|
|
|
- console.log("切换");
|
|
|
const progressBar = document.getElementById("progressBar");
|
|
|
progressBar!.style.width = 0 + "px";
|
|
|
var audio = document.getElementById("music1");
|
|
|
@@ -125,8 +164,30 @@ defineExpose({
|
|
|
clear,
|
|
|
});
|
|
|
|
|
|
+const autoPlayFn = () => {
|
|
|
+ const IS_IOS = !/(Android)/i.test(navigator.userAgent); //ios终端
|
|
|
+ if (IS_IOS) {
|
|
|
+ wx.config({
|
|
|
+ // 配置信息, 即使不正确也能使用 wx.ready
|
|
|
+ debug: false,
|
|
|
+ appId: "",
|
|
|
+ timestamp: 1,
|
|
|
+ nonceStr: "",
|
|
|
+ signature: "",
|
|
|
+ jsApiList: [],
|
|
|
+ });
|
|
|
+ wx.ready(function () {
|
|
|
+ document.getElementById("music1")!.load();
|
|
|
+ document.getElementById("music1")!.play();
|
|
|
+ state.value = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
+ getDuration();
|
|
|
clear();
|
|
|
+ autoPlayFn()
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -137,8 +198,9 @@ onMounted(() => {
|
|
|
@timeupdate="updateProgress"
|
|
|
controls
|
|
|
ref="audioRef"
|
|
|
- style="display: none"
|
|
|
+ style="display:none"
|
|
|
@canplay="getDuration"
|
|
|
+ preload="meta"
|
|
|
></audio>
|
|
|
<div class="audio-box">
|
|
|
<img
|
aamin
