const data = [ { "id": "0", "name": "凡笙弦語", "intro": "台灣新人Vtuber鹹魚翻身後依然是條鹹魚以歌唱與歌曲創作為主!", "img": "https://i.imgur.com/1Oahh38.jpg", "style": ["可愛"], "tags": ["#FS鹹魚", "#魚塭", "#TWVtuber" ], "contact": "", "follow": "", "mp4": null }, { "id": "1", "name": "小烏龜-Yui", "intro": "lorem", "img": "https://i.imgur.com/iHtiCpP.jpg", "style": ["可愛"], "tags": ["#小烏龜yui"], "contact": "", "follow": "", "mp4": null }, { "id": "2", "name": "柚餓幽窮", "intro": "lorem", "img": "https://i.imgur.com/g00i7Ji.jpg", "style": ["奶兇"], "tags": [], "contact": "", "follow": "", "mp4": null }, { "id": "3", "name": "花御いしき", "intro": "lorem", "img": "https://i.imgur.com/e0Nl0FW.png", "style": ["溫柔可愛", "人格分裂", "配音系"], "tags": ["#擴散希望", "#男vtuber", " #虛擬youtuber", "#新人VTuber"], "contact": "", "follow": "", "mp4": "https://www.mboxdrive.com/%E8%81%B2%E9%9F%B3%E7%9B%92%E5%AD%901%20-%20ishiki%20hanao.mp4" }, { "id": "4", "name": "Ikusen(小千)", "intro": "lorem", "img": "https://i.imgur.com/GXHDTcd.png", "style": ["御姊"], "tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"], "contact": "", "follow": "", "mp4": null }, { "id": "5", "name": "迷途小喵", "intro": "lorem", "img": "https://i.imgur.com/YnSPyv7.jpg", "style": ["御姊", "多聲線"], "tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"], "contact": "", "follow": "", "mp4": null }, { "id": "6", "name": "左翌設計 ZoeL Design", "intro": "lorem", "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg", "style": ["御姊", "多聲線"], "tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"], "contact": "", "follow": "", "mp4": null }, ]; function getVtuber() { if(window.location.pathname.match('vtuber')) { console.log('vtuber list'); let result = [...data]; console.log(result); let str = ''; for(let i = 0; i < result.length; i++){ let style = ''; for(let j = 0; j < result[i].style.length; j++){ style += `${result[i].style[j]}`; console.log(result[i].style.length); } str += `

Vtuber

${result[i].name}
${style}
`; } $('.vt-list .vt-content').html(str); $('.vt-content .card-link').click(function(){ const music = document.querySelector('.modal-body-sample audio'); const progressBar = document.querySelector('#progress-bar'); const progressZone = document.querySelector('.music-progress'); let selected = result.filter(item => item.id == $(this).data('id') )[0]; console.log(selected); $('#more1Modal .modal-title').text(selected.name); $('#more1Modal .modal-imgfr').css('background-image', `url(${selected.img})`); $('#more1Modal p').text(selected.intro); if(selected.mp4 == null) { $('.modal-body-sample').css('display', 'none'); } else { $('.modal-body-sample audio').attr('src', selected.mp4); } let hashtagStr = ""; for(let i = 0; i < selected.tags.length; i++){ hashtagStr+= `${selected.tags[i]}`; }; $('#more1Modal .modal-hashtag').html(hashtagStr); let isPlaying = false; $('.modal-body-toggleplay').click(function(){ //isPlaying? pauseMusic(music) : playMusic(music) if(isPlaying) { music.pause(); $('.modal-body-toggleplay').attr("src", "https://i.imgur.com/gYst9TQ.png"); isPlaying = false; } else { music.play(); $('.modal-body-toggleplay').attr("src", "https://i.imgur.com/f5PWQUb.png"); isPlaying = true; } console.log(isPlaying); }); $('[data-dismiss="modal"]').click(function() { music.pause(); $('.modal-body-toggleplay').attr("src", "https://i.imgur.com/gYst9TQ.png"); isPlaying = false; }); music.addEventListener('timeupdate', updateProgress); progressZone.addEventListener('click', setProgress); }) } } getVtuber(); const updateProgress = (e) => { const music = document.querySelector('.modal-body-sample audio'); const progressBar = document.querySelector('#progress-bar'); const progressZone = document.querySelector('.music-progress'); const { duration, currentTime } = e.srcElement; const progressPercent = (currentTime / duration) * 100 progressBar.style.width = `${progressPercent}%` if(progressPercent == 100) { music.pause(); $('.modal-body-toggleplay').attr("src", "https://i.imgur.com/gYst9TQ.png"); isPlaying = false; console.log('test'); } } function setProgress(e) { const music = document.querySelector('.modal-body-sample audio'); const width = this.clientWidth; const setPoint = e.offsetX; const duration = music.duration; music.currentTime = (setPoint / width) * duration; }