const data = [
{
"id": "0",
"name": "凡笙弦語",
"intro": "台灣新人Vtuber鹹魚翻身後依然是條鹹魚以歌唱與歌曲創作為主！",
"img": "https://i.imgur.com/1Oahh38.jpg",
"images": ["https://i.imgur.com/1Oahh38.jpg"],
"style": ["可愛"],
"tags": ["#FS鹹魚", "#魚塭", "#TWVtuber", "#台灣", "#台湾", "#VirtualYouTuber", "#虛擬YouTuber", "#Vtuber"],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "facebook",
"link": 'https://www.facebook.com/F.S.XianYu/',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "Youtube",
"link": "https://www.youtube.com/watch?v=AcE1edvJ9g0",
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/FS_xianyu',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "website",
"link": "https://marshmallow-qa.com/fs_xianyu",
"img": "https://i.imgur.com/8nmvSdj.png"
},
{
"channel": "twitch",
"link": 'https://www.facebook.com/groups/590614894737063/?hoisted_section_header_type=recently_seen&multi_permalinks=1253077595157453',
"img": "https://i.imgur.com/FjIaiz9.png"
},
],
"mp4": null
},
{
"id": "1",
"name": "小烏龜-Yui",
"intro": "日常♡搞怪♡美食小烏龜 姓名：Yu i 生日：2020/08/07 個性：愛玩、愛吃、愛搞怪 擅長：搗亂、畫圖 品種：烤饅頭 龜稀有值：100%",
"img": "https://i.imgur.com/iHtiCpP.jpg",
"images": ["https://i.imgur.com/iHtiCpP.jpg"],
"style": ["可愛"],
"tags": ["#小烏龜yui"],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "facebook",
"link": 'https://www.facebook.com/littleturtleyui/',
"img": "https://i.imgur.com/HtfL33q.png"
},
],
"mp4": null
},
{
"id": "2",
"name": "柚餓幽窮",
"intro": "哈囉大家好！我們是魔法少女⭐幽可⭐&狗狗🎀柚子🎀影片以遊戲、聊天、直播精華、連動…等為主每週二 四晚上六點出片❤假日直播 偶爾有突發⚠️_歡迎私訊合作邀約(˶‾᷄ ⁻̫ ‾᷅˵)希望能和大家一起玩💕_",
"img": "https://i.imgur.com/g00i7Ji.jpg",
"images": ["https://i.imgur.com/NKxoaoi.png", "https://i.imgur.com/pR2IjVn.png"],
"style": ["奶兇"],
"tags": [],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "facebook",
"link": 'https://www.facebook.com/profile.php?id=100070148449631',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "youtube",
"link": 'https://www.youtube.com/channel/UC9ymconZOuIj-cuWpEUyjUg',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "discord",
"link": 'https://discord.gg/4RRQHYfXww',
"img": "https://i.imgur.com/Vbjnelb.png"
},
],
"mp4": null
},
{
"id": "3",
"name": "花御いしき",
"intro": "吾是住在台灣的花神,如果名子不好記可以叫我花花就好! 願望是看見你們如花朵般燦爛的微笑，私は台湾に住む花の神様です。名前がわかりにくい場合は、華華と呼んでください！，願いが花のように明るくて、あなたの笑顔を作ることです！",
"img": "https://i.imgur.com/e0Nl0FW.png",
"images": ["https://i.imgur.com/e0Nl0FW.png"],
"style": ["溫柔可愛", "人格分裂", "配音系"],
"tags": ["#擴散希望", "#男vtuber", " #虛擬youtuber", "#新人VTuber"],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "facebook",
"link": 'https://www.facebook.com/groups/590614894737063/?hoisted_section_header_type=recently_seen&multi_permalinks=1253077595157453',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "Youtube",
"link": 'https://www.youtube.com/channel/UCtjosoymWqb5YtyL5BIqRlg',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/hanaoishiki',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "website",
"link": 'https://marshmallow-qa.com/hanaoishiki',
"img": "https://i.imgur.com/8nmvSdj.png"
},
{
"channel": "discord",
"link": 'https://discord.gg/Ey3rNJ75UZ',
"img": "https://i.imgur.com/Vbjnelb.png"
}
],
"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": "我是來自台灣的Vtuber(台V)，Ikusen(小千)！💕 最喜歡跟【MOMOMO團】的夥伴一起直播了!🐑",
"img": "https://i.imgur.com/GXHDTcd.png",
"images": ["https://i.imgur.com/GXHDTcd.png"],
"style": ["御姊"],
"tags": ["#台灣Vtuber", "#いくせん", "#VTuber ", "#TWvtuber", "#Ikusen", "#小千", "#虛擬Youtuber"],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "facebook",
"link": 'https://www.facebook.com/ikusen.vtube…',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "Youtube",
"link": 'https://www.youtube.com/channel/UCKazkVudNQs8ZhwfXj_RNPw',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/Ikusen_',
"img": "https://i.imgur.com/4VKBo9w.png"
},
],
"mp4": null
},
{
"id": "5",
"name": "迷途小喵",
"intro": "嗨大家好，這裡是迷途小喵，是一個多才多藝(?)但被非洲運氣所埋沒的人，實況台的90%物件大部分都是自己製作的喔，包含3D人物以及2D的美術，如果有需要委託的話也可以到作品集參考哦！台主是一個很S的人，常常有觀眾喜歡來本台被罵到社丁，開實況的初衷是為了與大家聊天互動，希望來看台的人不要太安靜呢！最後一點非常重要的是，小喵很愛錢錢，請給我錢錢",
"img": "https://i.imgur.com/v2Eknfp.png",
"images": ["https://i.imgur.com/v2Eknfp.png"],
"style": ["御姊", "多聲線"],
"tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "Youtube",
"link": 'https://www.youtube.com/channel/UCWtYRC3kmgSUQcWqWFqXvJA/featured',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitch",
"link": 'https://www.twitch.tv/straynyan',
"img": "https://i.imgur.com/FjIaiz9.png"
},
],
"mp4": null
},
{
"id": "6",
"name": "天晴Haruru🐧",
"intro": "我是養著可愛小企鵝的天晴Haruru🐧 喜歡電競、吉他、雜談、動漫、運動、程式設計、區塊鏈還有許多不同的領域 希望可以跟大家一起開心的遊戲和談天",
"img": "https://i.imgur.com/9autFIy.jpg",
"images": ["https://i.imgur.com/9autFIy.jpg"],
"style": ["奶兇"],
"tags": ["#天晴Haruru", "#VTuber", "#新人VTuber", "#TWvtuber", "#企鵝"],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "facebook",
"link": 'https://www.facebook.com/TCHaruru',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "Youtube",
"link": 'https://youtu.be/MYcs6bbxwWI',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/TCHaruru72',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "website",
"link": ' https://marshmallow-qa.com/tcharuru72',
"img": "https://i.imgur.com/8nmvSdj.png"
},
{
"channel": "discord",
"link": 'https://discord.gg/8eRWytUXtf',
"img": "https://i.imgur.com/Vbjnelb.png"
},
],
"mp4": null
},
{
"id": "7",
"name": "拉美拉 ramellae",
"intro": "我是打工巫女拉美拉 Ramellae ヾ(*´∀ ˋ*)ﾉ一邊打掃著神社，一邊嚮往著劍與魔法的魔幻世界✨✨✨",
"img": "https://i.imgur.com/0p2VzTh.jpg",
"images": ["https://i.imgur.com/0p2VzTh.jpg"],
"style": ["企劃型", "解憂", "混沌"],
"tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "facebook",
"link": 'https://pse.is/3kp3y3',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "Youtube",
"link": 'https://www.youtube.com/channel/UCEwfcA9-y1hcQpVMt9Xge_w',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://pse.is/3layv4',
"img": "https://i.imgur.com/4VKBo9w.png"
},
],
"mp4": null
},
{
"id": "8",
"name": "蕉バナ Bana🍌",
"intro": "黃色笑話、黑色幽默、尷尬雙關大量發生中⚠️喜歡遊戲、戲劇、唱歌、聊天。",
"img": "https://i.imgur.com/4NyjGaS.jpg",
"images": ["https://i.imgur.com/4NyjGaS.jpg"],
"style": [],
"tags": [],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "twitch",
"link": 'https://www.twitch.tv/jia0bana',
"img": "https://i.imgur.com/FjIaiz9.png"
},
{
"channel": "Youtube",
"link": 'https://www.youtube.com/channel/UCxyTFoXTDyo16R2zBEMPZrw/featured',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/Jia0bana',
"img": "https://i.imgur.com/4VKBo9w.png"
},
],
"mp4": null
},
{
"id": "9",
"name": "王顧採",
"intro": "藝輪點燈旗下所屬 Vtuber，平時的職業是六埕順揚宮主任委員，因為整天在休息室看股票泡茶，被太太說怎麼不去做點正事，所以決定中年轉職為偶像實習生的叔叔系藝人。預計會直播的方向包括了股市投資、民俗文化、新聞與訪談，如果有興趣的還請大家多多追蹤訂閱支持！",
"img": "https://i.imgur.com/jqK2SEM.jpg",
"images": ["https://i.imgur.com/jqK2SEM.jpg"],
"style": [],
"tags": [],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "twitch",
"link": 'https://www.twitch.tv/jia0bana',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "Youtube",
"link": 'https://www.youtube.com/channel/UCDK61SWPrZm3PDj8RohAM-w',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/chiveswang_llt5',
"img": "https://i.imgur.com/FjIaiz9.png"
},
{
"channel": "ig",
"link": 'https://www.instagram.com/chiveswang.llt5/',
"img": "https://i.imgur.com/MAObTJv.png"
},
],
"mp4": null
},
{
"id": "10",
"name": "【無声透明Vtuber】強化人間【ミラージュコロイド系Vtuber】",
"intro": "こんにちは、個人勢の無声透明系Vtuberの強化人間です！#バ美肉、#バ美声 不使用声優スタッフ交代の予定もありません。",
"img": "https://i.imgur.com/Y3AIW6I.png",
"images": ["https://i.imgur.com/Y3AIW6I.png", "https://i.imgur.com/xKQozOe.png", "https://i.imgur.com/z52eVu2.png", "https://i.imgur.com/zjNCBff.png", "https://i.imgur.com/iTOPEJ3.png"],
"style": [],
"tags": ["#日本", "#Vtuber"],
"contact": "",
"demand": ["角色曝光"],
"follow": [
{
"channel": "Youtube",
"link": 'https://www.youtube.com/c/trombeningen/featured',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/trombeningen',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "website",
"link": 'https://marshmallow-qa.com/trombeningen',
"img": "https://i.imgur.com/8nmvSdj.png"
},
],
"mp4": null
},
{
"id": "11",
"name": "鈴音紅葉",
"intro": "【中ENG日粵台MY】馬來西亞Vtuber鈴聲響起，紅葉落下。 目標成為鬼界最牛逼的修羅！目標：在這個世界成為真棒修羅！",
"img": "https://i.imgur.com/x9vPw4G.png",
"images": ["https://i.imgur.com/x9vPw4G.png"],
"style": [],
"tags": [],
"contact": "",
"demand": ["角色曝光"],
"follow": [
{
"channel": "Youtube",
"link": 'https://www.youtube.com/channel/UCiuUID56A217ZapMbpNC4WQ/featured',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/suzunemomiji_V',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "website",
"link": 'https://ko-fi.com/suzunemomiji',
"img": "https://i.imgur.com/8nmvSdj.png"
},
],
"mp4": null
},
{
"id": "12",
"name": "渡清夢",
"intro": "幽鬼與靈狐的禁忌之子，在隔離於夢與現世的夾縫小空間中獨自生活，現在來到現世探索中！",
"img": "https://i.imgur.com/gAIFIoI.png",
"images": ["https://i.imgur.com/gAIFIoI.png"],
"style": [],
"tags": ["#VTuber", "#TW_VTuber", "＃個人勢"],
"contact": "",
"demand": ["角色曝光"],
"follow": [
{
"channel": "Youtube",
"link": 'https://www.youtube.com/channel/UC_BjgwcygvQatWUh06QQHwg',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/KiyoyumeWataru',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "twitch",
"link": 'https://www.twitch.tv/wataru_kiyoyum',
"img": "https://i.imgur.com/FjIaiz9.png"
},
],
"mp4": null
},
{
"id": "13",
"name": "Chiron Azu",
"intro": "天界轉生，追求愉悅的死亡天使的牧師。",
"img": "https://i.imgur.com/qpTyfAS.png",
"images": ["https://i.imgur.com/qpTyfAS.png"],
"style": [],
"tags": ["#VTuber", "#TW_VTuber", "＃個人勢", "#新人Vtuber ", "#VTUBER準備中"],
"contact": "",
"demand": ["角色曝光"],
"follow": [
{
"channel": "Youtube",
"link": 'http://reurl.cc/9rQvo8',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/Azu_Chiron',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "facebook",
"link": 'http://reurl.cc/kZQONG',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "website",
"link": 'https://reurl.cc/bXyV6d',
"img": "https://i.imgur.com/8nmvSdj.png"
},
],
"mp4": null
},
{
"id": "14",
"name": "白蛇 梅伊",
"intro": "안nya~嗨嗨各位！我是梅伊，是被梅杜莎詛咒的探險家目前正在尋求變回人類的辦法，與ＷANDER²得大家一起探險著如果你知道任何變回人類的方法，歡迎聯絡我！",
"img": "https://i.imgur.com/ApS4ytu.png",
"images": ["https://i.imgur.com/ApS4ytu.png"],
"style": [],
"tags": ["#VTuber"],
"contact": "",
"demand": ["角色曝光"],
"follow": [
{
"channel": "twitter",
"link": 'https://twitter.com/Wander2_Meii',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "facebook",
"link": 'https://reurl.cc/l0K63Q',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "website",
"link": 'http://marshmallow-qa.com/meiivtuber',
"img": "https://i.imgur.com/8nmvSdj.png"
},
{
"channel": "twitch",
"link": 'https://www.twitch.tv/meii_official',
"img": "https://i.imgur.com/FjIaiz9.png"
},
{
"channel": "discord",
"link": 'https://discord.gg/PgB3JvsJ5s',
"img": "https://i.imgur.com/Vbjnelb.png"
},
],
"mp4": null
},
{
"id": "15",
"name": "其那",
"intro": "來自異世界的半獸人狼狼，是個喜歡的東西很多但都做不好的廢柴型vtuber，歡迎多關注我唷!",
"img": "https://i.imgur.com/lZionzv.png",
"images": ["https://i.imgur.com/lZionzv.png"],
"style": [],
"tags": ["#VTuber", "#KinaFanArt", "#KinaLiveStream"],
"contact": "",
"demand": ["角色曝光"],
"follow": [
{
"channel": "twitter",
"link": 'https://twitter.com/kina_agana',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "website",
"link": 'https://reurl.cc/E2x1dg',
"img": "https://i.imgur.com/8nmvSdj.png"
},
{
"channel": "discord",
"link": 'https://discord.com/invite/4kKpdgqQ9g',
"img": "https://i.imgur.com/Vbjnelb.png"
},
],
"mp4": null
},
{
"id": "16",
"name": "水母暮暮-クラゲMooMoo",
"intro": "台灣VTuber－理財系VTuber，前藝名：水母SB，大家好我是藍水母帝國的王子！，為了延續身下男孩軀殼的夢想，而踏入了網路世界為了成為VTuber(虛擬偶像)，本頻道將以「遊戲直播」為主題，「財經商業」、「歌回雜談」為次標題",
"img": "https://i.imgur.com/8CqqxQH.png",
"images": ["https://i.imgur.com/8CqqxQH.png"],
"style": [],
"tags": ["#VTuber", "#KinaFanArt", "#KinaLiveStream"],
"contact": "",
"demand": ["角色曝光", "聲優配音", "承接業配"],
"follow": [
{
"channel": "youtube",
"link": 'https://youtu.be/doIFxtdnYO8',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "twitter",
"link": 'https://twitter.com/MooMoo_6362',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "facebook",
"link": 'https://www.facebook.com/profile.php?id=100064337674152',
"img": "https://i.imgur.com/HtfL33q.png"
},
],
"mp4": null
},
{
"id": "17",
"name": "謙謙子",
"intro": "不斷輪迴的貓妖喜歡自在生活！身高：162cm 。",
"img": "https://i.imgur.com/DMxaCAo.png",
"images": ["https://i.imgur.com/DMxaCAo.png"],
"style": [],
"tags": ["#VTuber", "妖界通訊"],
"contact": "",
"demand": ["角色曝光", "承接業配"],
"follow": [
{
"channel": "twitter",
"link": 'https://twitter.com/kennkennko',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "website",
"link": 'https://marshmallow-qa.com/kennkennshi?utm_medium=url_text&utm_source=promotion',
"img": "https://i.imgur.com/8nmvSdj.png"
},
{
"channel": "twitch",
"link": ' https://www.twitch.tv/kennkennko',
"img": "https://i.imgur.com/FjIaiz9.png"
},
],
"mp4": null
},
{
"id": "18",
"name": "恰克",
"intro": "一隻苗小的北極狼，想讓大家認識到台語美好的Vtuber，同時也希望能夠透過自己微小的力量幫助動物們~",
"img": "https://i.imgur.com/mMr4o5b.png",
"images": ["https://i.imgur.com/mMr4o5b.png"],
"style": [],
"tags": ["#VTuber"],
"contact": "",
"demand": ["角色曝光", "承接業配"],
"follow": [
{
"channel": "twitter",
"link": 'https://twitter.com/Chark0614',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "youtube",
"link": 'https://t.co/55hwr4NWTy?amp=1',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "facebook",
"link": 'https://www.facebook.com/profile.php?id=100071782180130',
"img": "https://i.imgur.com/HtfL33q.png"
},
],
"mp4": null
},
{
"id": "19",
"name": "朵璃安-璃安ちゃん",
"intro": "朵璃安/Dorian/璃安ちゃん<，大家好，我是朵璃安Dorian，來自海底邊緣的水母精魄！",
"img": "https://i.imgur.com/7ITEvc9.png",
"images": ["https://i.imgur.com/7ITEvc9.png"],
"style": [],
"tags": ["#新人VTuber", "#個人勢", "準備中"],
"contact": "",
"demand": ["角色曝光", "承接業配"],
"follow": [
{
"channel": "twitter",
"link": 'https://twitter.com/VtuberDorian',
"img": "https://i.imgur.com/4VKBo9w.png"
},
{
"channel": "youtube",
"link": 'http://reurl.cc/W37aOO',
"img": "https://i.imgur.com/c4VdjRJ.png"
},
{
"channel": "facebook",
"link": 'https://reurl.cc/KA5pER',
"img": "https://i.imgur.com/HtfL33q.png"
},
{
"channel": "ig",
"link": 'https://www.instagram.com/vtuberdorian/',
"img": "https://i.imgur.com/MAObTJv.png"
},
],
"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 += `<span class="vt-style">${result[i].style[j]}</span>`;
console.log(result[i].style.length);
}
str += `<div class="col-6 col-sm-4 col-md-3">
<div class="card" style="width: 100%;">
<div class="vt-ribbon"><p>Vtuber</p></div>
<div class="card-img-fr" style="background-image:url(${result[i].img})"></div>
<div class="card-body">
<h5 class="card-title">${result[i].name}</h5>
${style}
<button class="card-link" data-toggle="modal" data-target="#more1Modal" data-id="${result[i].id}" >查看更多></button>
</div>
</div>
</div>`;
}
$('.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 p').text(selected.intro);
let slideStr = '';
for(let i = 0; i < selected.images.length; i++){
if(i==0) {
slideStr += `<div class="item active modal-imgfr">
<div class="modal-slide-item" alt="..." style="background-image:url(${selected.images[i]})"></div>
</div>`;
} else {
slideStr += `<div class="item modal-imgfr">
<div class="modal-slide-item" alt="..." style="background-image:url(${selected.images[i]})"></div>
</div>`;
}
}
$('#more1Modal .carousel-inner').html(slideStr);
let str = '';
for(let i = 0; i < selected.follow.length; i++){
str += `<a href="${selected.follow[i].link}"><img src="${selected.follow[i].img}" alt="${selected.follow[i].channel}" width="32px" height="32px"></a>`
}
$('#more1Modal .footer-socials').html(str);
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+= `<span class="hashtag-pill">${selected.tags[i]}</span>`;
};
let demandStr = "";
for(let i = 0; i < selected.demand.length; i++){
demandStr+= `<span class="demand-item">${selected.demand[i]}</span>`;
};
$('#more1Modal .modal-hashtag').html(hashtagStr);
$('#more1Modal .modal-body-demandArr').html(demandStr);
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;
}