<template>
<gw-audiott
@current="currentProgress"
@error="error"
@end="end"
@handleModeChange="handleModeChange"
@handleNext="handleNext"
@handlePrev="handlePrev"
:autoplay="true"
:src="src"
:showText="true"
:list="textList"
:fields="{text:'detail'}"
rightRole="B"
style="position: fixed;bottom:0;left: 0;"
>
</gw-audiott>
</template>
<script>
import gwAudiott from './compounents/gw-audiott/gw-audiott.vue'
import navBar from '../../components/nav-bar/nav-bar.vue'
import { formatTime } from '../../util/format.js'
import { parseLyric } from '../../util/parse-lyric.js'
import { getStore, setStore } from '../../util/storage.js'
export default {
components: {
gwAudiott
},
data() {
return {
songLists: [],
songIndex: 0,
songId: 0,
src:'',
textList:[],
playModeIndex: 0,
playMode: ['order', 'random', 'repeat'], //保存到store
}
},
onLoad(option) {
////////mock
// const lrc = `WEBVTT
// [00:00.00]Lesson 143. A walk through the woods.
// [00:08.00]Listen to the tape, then answer this question.
// [00:13.50]What was so funny about the words on the sign?
// [00:19.32]I live in a very old town, which is surrounded by beautiful woods.
// [00:25.48]It is a famous beauty spot.
// [00:28.10]On Sundays, hundreds of people come from the city to see our town and to walk through the woods.
// [00:35.10]Visitors have been asked to keep the woods clean and tidy.
// [00:40.10]Litter baskets have been placed under the trees, but people still throw their rubbish everywhere.
// [00:47.10]Last Wednesday, I went for a walk in the woods.
// [00:51.10]What I saw made me very sad.
// [00:55.10]I counted seven old cars and three old refrigerators.
// [01:00.10]The litter baskets were empty, and the ground was covered with pieces of paper, cigarette ends, old tires, empty bottles and rusty tins.
// [01:12.10]Among the rubbish, I found a sign which said,
// [01:16.10]Anyone who leaves litter in these woods will be prosecuted.
// [01:25.10]Thank you for watching!
// `
// const result = parseLyric(lrc)
const vtt = [{"startTime": "", "endTime": "", "detail": "WEBVTT\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 0, "endTime": 8000, "detail": "Lesson 143. A walk through the woods.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 8000, "endTime": 13050, "detail": "Listen to the tape, then answer this question.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 13050, "endTime": 19032, "detail": "What was so funny about the words on the sign?\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 19032, "endTime": 25048, "detail": "I live in a very old town, which is surrounded by beautiful woods.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 25048, "endTime": 28010, "detail": "It is a famous beauty spot.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 28010, "endTime": 35010, "detail": "On Sundays, hundreds of people come from the city to see our town and to walk through the woods.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 35010, "endTime": 40010, "detail": "Visitors have been asked to keep the woods clean and tidy.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 40010, "endTime": 47010, "detail": "Litter baskets have been placed under the trees, but people still throw their rubbish everywhere.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 47010, "endTime": 51010, "detail": "Last Wednesday, I went for a walk in the woods.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 51010, "endTime": 55010, "detail": "What I saw made me very sad.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 55010, "endTime": 60010, "detail": "I counted seven old cars and three old refrigerators.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 60010, "endTime": 72010, "detail": "The litter baskets were empty, and the ground was covered with pieces of paper, cigarette ends, old tires, empty bottles and rusty tins.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 72010, "endTime": 76010, "detail": "Among the rubbish, I found a sign which said,\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 76010, "endTime": 82010, "detail": "Anyone who leaves litter in these woods will be prosecuted.\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}, {"startTime": 85010, "endTime": 90010, "detail": "Thank you for watching!\n", "role": "A"}, {"startTime": "", "endTime": "", "detail": "\n", "role": "A"}]
//////////
this.songId = option.id
//点击播放的时候把id加入队列
//进入后获取新的队列
let playlist = getStore('playlist')
//console.log(playlist,typeof playlist,typeof playlist.length)
//进入后如果队列不存在则把这首的id放到队列顶端
let index = 0,
match = false;
if ((typeof playlist) == 'object' && (typeof playlist.length) == 'number') {
for (const obj of playlist) {
if (obj == this.songId) {
match = true;
this.songIndex = index;
break;
}
index++;
}
if (match == false) {
playlist.push(this.songId)
setStore('playlist', playlist)
}
} else {
setStore('playlist', [this.songId])
}
this.songLists = playlist
this.src ='https://www.msnao.com/2019/03/'+this.songId+'.mp3'
this.textList = vtt
},
methods:{
currentProgress(current) {
// console.log(播放进度：${current});
},
error(err) {
console.log(播放出错：${err});
},
end() {
console.log(播放结束);
},
// getList(callback){
// //不能直接return，子组件接收不到
// callback({
// "songId":this.songId,
// "src":this.src,
// "songLists":this.songLists,
// "textList":this.textList
// })
// },
// getPlayList(f){
// console.log(111111, this.playModeIndex)
// return new Promise((resolve)=>{
// //this.$emit('playLists', (back)=>{
// this.songLists = back.songLists
// this.songId = back.songId
// resolve(f())
// //})
// })
// },
getData(id){
let src = 'https://www.msnao.com/2019/03/'+id+'.mp3';
this.src = src;
console.log(src)
},
handleModeChange(data) {
this.playModeIndex = data
},
handleNext() {
switch (this.playModeIndex) {
case 0: //循环
if (this.songIndex === this.songLists.length - 1) {
this.songIndex = 0
} else {
this.songIndex++
}
if (this.songLists[this.songIndex] == null) {
uni.showToast({
title: '没有下一首了',
mask: false,
duration: 1000
});
break;
}
this.songId = this.songLists[this.songIndex]
this.getData(this.songId) //播放
break
case 1: //随机
this.songIndex = Math.floor(Math.random() * this.songLists.length)
console.log("rand", this.songIndex, this.songLists)
this.songId = this.songLists[this.songIndex]
case 2: //单曲
this.getData(this.songId)//播放
break
}
},
handlePrev() {
switch (this.playModeIndex) {
case 0:
if (this.songIndex === 0) {
this.songIndex = this.songLists.length - 1
} else {
this.songIndex--
}
this.songId = this.songLists[this.songIndex]
break
case 1:
this.songIndex = Math.floor(Math.random() * this.songLists.length)
this.songId = this.songLists[this.songIndex]
case 2:
break
}
this.getData(this.songId)//播放
}
}
}
</script>
转载请注明：SuperIT » www
