需求

音频打开播放过后,再次进入需要跳到上次播放的位置

实现

使用vue

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
<template >
<div class="main-box">
<audio
ref="audio"
controls="controls"
:src="SRC"
@timeupdate="timeupdate"
@canplay="canplay"
autoplay="autoplay">
</audio>

</div>

</template>

<script>
export default {
name: 'reportDetails',
data() {
return {
TYPE: "",
SRC: "",
TITLE: "其他",
first: true
}
},
mounted() {
this.TYPE = this.$route.query.type;
this.SRC = this.$route.query.src;
this.TITLE = this.$route.query.name;
},
methods: {
timeupdate(e) {
if (localStorage.getItem(e.target.currentSrc)) {
if (this.first && e.target.currentTime < Number(localStorage.getItem(e.target.currentSrc))) {
this.$refs.audio.play()
this.$refs.audio.currentTime = localStorage.getItem(e.target.currentSrc) + ''
}
}
localStorage.setItem(e.target.currentSrc, e.target.currentTime);
this.first = false
}
}
}
</script>

参考

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio

https://www.yuque.com/chenshier/chuyi/cl0x98

广告

阿里云活动云服务器低至
1核-2G-1M,1年89元,3年229。
2核-4G-3M,2年469元,3年799。
2核-8G-5M,3年899元。
新老客户都有优惠 点击查看详情/购买
腾讯云现在活动
1核 2G 1M 88一年
2核 4G 5M 3年只要998。 点击查看详情/购买