1 line
246 KiB
HTML
1 line
246 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#FFF"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"><link rel="icon" type="image/ico" sizes="32x32" href="/images/favicon.ico"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link rel="alternate" type="application/rss+xml" title="涛声依旧" href="https://hitoli.com/rss.xml"><link rel="alternate" type="application/atom+xml" title="涛声依旧" href="https://hitoli.com/atom.xml"><link rel="alternate" type="application/json" title="涛声依旧" href="https://hitoli.com/feed.json"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext"><link rel="stylesheet" href="/css/app.css?v=0.0.0"><meta name="keywords" content="博客,Hexo,Shoka,背景音乐"><link rel="canonical" href="https://hitoli.com/2022/09/26/%E8%A7%A3%E5%86%B3Hexo-Shoka%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90%E6%97%A0%E6%B3%95%E6%92%AD%E6%94%BE%E7%9A%84%E9%97%AE%E9%A2%98/"><title>解决 Hexo+Shoka 背景音乐无法播放的问题 - Hexo - Docker - 极空间 | ☆∵∴Hito∴∵★ = 涛声依旧 = 天下事有难易乎？为之，则难者亦易矣</title><meta name="generator" content="Hexo 6.3.0"></head><body itemscope itemtype="http://schema.org/WebPage"><div id="loading"><div class="cat"><div class="body"></div><div class="head"><div class="face"></div></div><div class="foot"><div class="tummy-end"></div><div class="bottom"></div><div class="legs left"></div><div class="legs right"></div></div><div class="paw"><div class="hands left"></div><div class="hands right"></div></div></div></div><div id="container"><header id="header" itemscope itemtype="http://schema.org/WPHeader"><div class="inner"><div id="brand"><div class="pjax"><h1 itemprop="name headline">解决 Hexo+Shoka 背景音乐无法播放的问题</h1><div class="meta"><span class="item" title="创建时间：2022-09-26 19:30:00"><span class="icon"><i class="ic i-calendar"></i> </span><span class="text">发表于</span> <time itemprop="dateCreated datePublished" datetime="2022-09-26T19:30:00+08:00">2022-09-26</time> </span><span class="item" title="本文字数"><span class="icon"><i class="ic i-pen"></i> </span><span class="text">本文字数</span> <span>18k</span> <span class="text">字</span> </span><span class="item" title="阅读时长"><span class="icon"><i class="ic i-clock"></i> </span><span class="text">阅读时长</span> <span>17 分钟</span></span></div></div></div><nav id="nav"><div class="inner"><div class="toggle"><div class="lines" aria-label="切换导航栏"><span class="line"></span> <span class="line"></span> <span class="line"></span></div></div><ul class="menu"><li class="item title"><a href="/" rel="start">☆∵∴Hito∴∵★</a></li></ul><ul class="right"><li class="item theme"><i class="ic i-sun"></i></li><li class="item search"><i class="ic i-search"></i></li></ul></div></nav></div><div id="imgs" class="pjax"><ul><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gicli9lfebj20zk0m84qp.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipeybxm1pj20zk0m8niv.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipeuibk9fj20zk0m8ay2.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclimtf7dj20zk0m8qav.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipex2cdtbj20zk0m8x6p.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipesx5fdwj20zk0m81kx.jpg"></li></ul></div></header><div id="waves"><svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/></defs><g class="parallax"><use xlink:href="#gentle-wave" x="48" y="0"/><use xlink:href="#gentle-wave" x="48" y="3"/><use xlink:href="#gentle-wave" x="48" y="5"/><use xlink:href="#gentle-wave" x="48" y="7"/></g></svg></div><main><div class="inner"><div id="main" class="pjax"><div class="article wrap"><div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList"><i class="ic i-home"></i> <span><a href="/">首页</a></span><i class="ic i-angle-right"></i> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" itemprop="item" rel="index" title="分类于 极空间"><span itemprop="name">极空间</span></a><meta itemprop="position" content="1"></span><i class="ic i-angle-right"></i> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" itemprop="item" rel="index" title="分类于 Docker"><span itemprop="name">Docker</span></a><meta itemprop="position" content="2"></span><i class="ic i-angle-right"></i> <span class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/Hexo/" itemprop="item" rel="index" title="分类于 Hexo"><span itemprop="name">Hexo</span></a><meta itemprop="position" content="3"></span></div><article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://hitoli.com/2022/09/26/%E8%A7%A3%E5%86%B3Hexo-Shoka%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90%E6%97%A0%E6%B3%95%E6%92%AD%E6%94%BE%E7%9A%84%E9%97%AE%E9%A2%98/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="/images/avatar.jpg"><meta itemprop="name" content="Hito Li"><meta itemprop="description" content="天下事有难易乎？为之，则难者亦易矣, 天生我材必有用"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="涛声依旧"></span><div class="body md" itemprop="articleBody"><h4 id="问题描述"><a class="anchor" href="#问题描述">#</a> 问题描述</h4><p>今天突然发现博客的音乐无法播放了，经过一顿查找，发现是因为<span class="red"><span class="exturl" data-url="aHR0cHM6Ly9hcGkuaS1tZXRvLmNvbS9tZXRpbmcvYXBp"> https://api.i-meto.com/meting/api</span></span> 获取的音乐地址出现了问题，估计是被网易云给封禁了。shoka 主题应该是通过这个网站提取音乐地址、图片等信息。通过断点发现网易播放列表还是能正常获取的，只是列表中的具体音乐、图片出现了问题。因为 meto 是把音乐的 url 指向自己的服务地址，然后通过参数获取的最终音乐，所以我通过参数拼凑出最终的网易云音乐地址，自此问题基本解决。只针对网易播放列表，图片只能使用一张固定的（因为图片的具体规律不知道 O (∩_∩) O~）。</p><h4 id="解决方法"><a class="anchor" href="#解决方法">#</a> 解决方法</h4><p>到 themes\shoka\source\js\_app 目录下打开 player.js 文件，替换成如下代码。</p><figure class="highlight js"><figcaption data-lang="JavaScript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token keyword">var</span> <span class="token constant">NOWPLAYING</span> <span class="token operator">=</span> <span class="token keyword">null</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token keyword">const</span> isMobile <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">mobile</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token keyword">const</span> <span class="token function-variable function">mediaPlayer</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="4"></td><td><pre> <span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="5"></td><td><pre> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'audio'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="6"></td><td><pre> <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'random'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="7"></td><td><pre> <span class="token literal-property property">btns</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'play-pause'</span><span class="token punctuation">,</span> <span class="token string">'music'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="8"></td><td><pre> <span class="token literal-property property">controls</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'mode'</span><span class="token punctuation">,</span> <span class="token string">'backward'</span><span class="token punctuation">,</span> <span class="token string">'play-pause'</span><span class="token punctuation">,</span> <span class="token string">'forward'</span><span class="token punctuation">,</span> <span class="token string">'volume'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="9"></td><td><pre> <span class="token literal-property property">events</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="10"></td><td><pre> <span class="token string-property property">"play-pause"</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="11"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>source<span class="token punctuation">.</span>paused<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="12"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="13"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="14"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="15"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="16"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="17"></td><td><pre> <span class="token string-property property">"music"</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="18"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>info<span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">hasClass</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="19"></td><td><pre> info<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="20"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="21"></td><td><pre> info<span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="22"></td><td><pre> playlist<span class="token punctuation">.</span><span class="token function">scroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="23"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="24"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="25"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="26"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span> utils <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="27"></td><td><pre> <span class="token function-variable function">random</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">len</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="28"></td><td><pre> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> len<span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="29"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="30"></td><td><pre> <span class="token function-variable function">parse</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">link</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="31"></td><td><pre> <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="32"></td><td><pre> <span class="token punctuation">[</span></pre></td></tr><tr><td data-num="33"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'music.163.com.*song.*id=(\\d+)'</span><span class="token punctuation">,</span> <span class="token string">'netease'</span><span class="token punctuation">,</span> <span class="token string">'song'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="34"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'music.163.com.*album.*id=(\\d+)'</span><span class="token punctuation">,</span> <span class="token string">'netease'</span><span class="token punctuation">,</span> <span class="token string">'album'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="35"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'music.163.com.*artist.*id=(\\d+)'</span><span class="token punctuation">,</span> <span class="token string">'netease'</span><span class="token punctuation">,</span> <span class="token string">'artist'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="36"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'music.163.com.*playlist.*id=(\\d+)'</span><span class="token punctuation">,</span> <span class="token string">'netease'</span><span class="token punctuation">,</span> <span class="token string">'playlist'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="37"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'music.163.com.*discover/toplist.*id=(\\d+)'</span><span class="token punctuation">,</span> <span class="token string">'netease'</span><span class="token punctuation">,</span> <span class="token string">'playlist'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="38"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'y.qq.com.*song/(\\w+).html'</span><span class="token punctuation">,</span> <span class="token string">'tencent'</span><span class="token punctuation">,</span> <span class="token string">'song'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="39"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'y.qq.com.*album/(\\w+).html'</span><span class="token punctuation">,</span> <span class="token string">'tencent'</span><span class="token punctuation">,</span> <span class="token string">'album'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="40"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'y.qq.com.*singer/(\\w+).html'</span><span class="token punctuation">,</span> <span class="token string">'tencent'</span><span class="token punctuation">,</span> <span class="token string">'artist'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="41"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'y.qq.com.*playsquare/(\\w+).html'</span><span class="token punctuation">,</span> <span class="token string">'tencent'</span><span class="token punctuation">,</span> <span class="token string">'playlist'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="42"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'y.qq.com.*playlist/(\\w+).html'</span><span class="token punctuation">,</span> <span class="token string">'tencent'</span><span class="token punctuation">,</span> <span class="token string">'playlist'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="43"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'xiami.com.*song/(\\w+)'</span><span class="token punctuation">,</span> <span class="token string">'xiami'</span><span class="token punctuation">,</span> <span class="token string">'song'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="44"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'xiami.com.*album/(\\w+)'</span><span class="token punctuation">,</span> <span class="token string">'xiami'</span><span class="token punctuation">,</span> <span class="token string">'album'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="45"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'xiami.com.*artist/(\\w+)'</span><span class="token punctuation">,</span> <span class="token string">'xiami'</span><span class="token punctuation">,</span> <span class="token string">'artist'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="46"></td><td><pre> <span class="token punctuation">[</span><span class="token string">'xiami.com.*collect/(\\w+)'</span><span class="token punctuation">,</span> <span class="token string">'xiami'</span><span class="token punctuation">,</span> <span class="token string">'playlist'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="47"></td><td><pre> <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">rule</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="48"></td><td><pre> <span class="token keyword">var</span> patt <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span>rule<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="49"></td><td><pre> <span class="token keyword">var</span> res <span class="token operator">=</span> patt<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="50"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>res <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="51"></td><td><pre> result <span class="token operator">=</span> <span class="token punctuation">[</span>rule<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> rule<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> res<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="52"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="53"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="54"></td><td><pre> <span class="token keyword">return</span> result</pre></td></tr><tr><td data-num="55"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="56"></td><td><pre> <span class="token function-variable function">fetch</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">source</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="57"></td><td><pre> <span class="token keyword">var</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="58"></td><td><pre></pre></td></tr><tr><td data-num="59"></td><td><pre> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="60"></td><td><pre> source<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">raw</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="61"></td><td><pre> <span class="token keyword">var</span> meta <span class="token operator">=</span> utils<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>raw<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="62"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>meta<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="63"></td><td><pre> <span class="token keyword">var</span> skey <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>meta<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="64"></td><td><pre> <span class="token keyword">var</span> playlist <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>skey<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="65"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>playlist<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="66"></td><td><pre> <span class="token comment">// 自己修改 - start</span></pre></td></tr><tr><td data-num="67"></td><td><pre> <span class="token keyword">var</span> audioInfos <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>playlist<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="68"></td><td><pre> audioInfos<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="69"></td><td><pre> item<span class="token punctuation">.</span>company <span class="token operator">=</span> meta<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="70"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="71"></td><td><pre> list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>list<span class="token punctuation">,</span> audioInfos<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="72"></td><td><pre> <span class="token function">resolve</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="73"></td><td><pre> <span class="token comment">// 自己修改 - end</span></pre></td></tr><tr><td data-num="74"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="75"></td><td><pre> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://api.i-meto.com/meting/api?server='</span> <span class="token operator">+</span> meta<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'&type='</span> <span class="token operator">+</span> meta<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'&id='</span> <span class="token operator">+</span> meta<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'&r='</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="76"></td><td><pre> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="77"></td><td><pre> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="78"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">json</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="79"></td><td><pre> store<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>skey<span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>json<span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="80"></td><td><pre> list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>list<span class="token punctuation">,</span> json<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="81"></td><td><pre> <span class="token function">resolve</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="82"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">ex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="83"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="84"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="85"></td><td><pre> list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>raw<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="86"></td><td><pre> <span class="token function">resolve</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="87"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="88"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="89"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="90"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="91"></td><td><pre> <span class="token function-variable function">secondToTime</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">second</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="92"></td><td><pre> <span class="token keyword">var</span> <span class="token function-variable function">add0</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="93"></td><td><pre> <span class="token keyword">return</span> <span class="token function">isNaN</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'00'</span> <span class="token operator">:</span> <span class="token punctuation">(</span>num <span class="token operator"><</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">+</span> num <span class="token operator">:</span> <span class="token string">''</span> <span class="token operator">+</span> num<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="94"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="95"></td><td><pre> <span class="token keyword">var</span> hour <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>second <span class="token operator">/</span> <span class="token number">3600</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="96"></td><td><pre> <span class="token keyword">var</span> min <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>second <span class="token operator">-</span> hour <span class="token operator">*</span> <span class="token number">3600</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="97"></td><td><pre> <span class="token keyword">var</span> sec <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>second <span class="token operator">-</span> hour <span class="token operator">*</span> <span class="token number">3600</span> <span class="token operator">-</span> min <span class="token operator">*</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="98"></td><td><pre> <span class="token keyword">return</span> <span class="token punctuation">(</span>hour <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token punctuation">[</span>hour<span class="token punctuation">,</span> min<span class="token punctuation">,</span> sec<span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span>min<span class="token punctuation">,</span> sec<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>add0<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">':'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="99"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="100"></td><td><pre> <span class="token literal-property property">nameMap</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="101"></td><td><pre> <span class="token literal-property property">dragStart</span><span class="token operator">:</span> isMobile <span class="token operator">?</span> <span class="token string">'touchstart'</span> <span class="token operator">:</span> <span class="token string">'mousedown'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="102"></td><td><pre> <span class="token literal-property property">dragMove</span><span class="token operator">:</span> isMobile <span class="token operator">?</span> <span class="token string">'touchmove'</span> <span class="token operator">:</span> <span class="token string">'mousemove'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="103"></td><td><pre> <span class="token literal-property property">dragEnd</span><span class="token operator">:</span> isMobile <span class="token operator">?</span> <span class="token string">'touchend'</span> <span class="token operator">:</span> <span class="token string">'mouseup'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="104"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="105"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span> source <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="106"></td><td><pre></pre></td></tr><tr><td data-num="107"></td><td><pre> t<span class="token punctuation">.</span>player <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="108"></td><td><pre> <span class="token literal-property property">_id</span><span class="token operator">:</span> utils<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token number">999999</span><span class="token punctuation">)</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="109"></td><td><pre> <span class="token literal-property property">group</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="110"></td><td><pre> <span class="token comment">// 加载播放列表</span></pre></td></tr><tr><td data-num="111"></td><td><pre> <span class="token function-variable function">load</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">newList</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="112"></td><td><pre> <span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token string">""</span></pre></td></tr><tr><td data-num="113"></td><td><pre> <span class="token keyword">var</span> that <span class="token operator">=</span> <span class="token keyword">this</span></pre></td></tr><tr><td data-num="114"></td><td><pre></pre></td></tr><tr><td data-num="115"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>newList <span class="token operator">&&</span> newList<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="116"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>rawList <span class="token operator">!==</span> newList<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="117"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>rawList <span class="token operator">=</span> newList<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="118"></td><td><pre> playlist<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="119"></td><td><pre> <span class="token comment">// 获取新列表</span></pre></td></tr><tr><td data-num="120"></td><td><pre> <span class="token comment">//this.fetch()</span></pre></td></tr><tr><td data-num="121"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="122"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="123"></td><td><pre> <span class="token comment">// 没有列表时，隐藏按钮</span></pre></td></tr><tr><td data-num="124"></td><td><pre> d <span class="token operator">=</span> <span class="token string">"none"</span></pre></td></tr><tr><td data-num="125"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="126"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="127"></td><td><pre> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> el <span class="token keyword">in</span> buttons<span class="token punctuation">.</span>el<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="128"></td><td><pre> buttons<span class="token punctuation">.</span>el<span class="token punctuation">[</span>el<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">display</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="129"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="130"></td><td><pre> <span class="token keyword">return</span> <span class="token keyword">this</span></pre></td></tr><tr><td data-num="131"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="132"></td><td><pre> <span class="token function-variable function">fetch</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="133"></td><td><pre> <span class="token keyword">var</span> that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="134"></td><td><pre> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="135"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>playlist<span class="token punctuation">.</span>data<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="136"></td><td><pre> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="137"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="138"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>options<span class="token punctuation">.</span>rawList<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="139"></td><td><pre> <span class="token keyword">var</span> promises <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="140"></td><td><pre></pre></td></tr><tr><td data-num="141"></td><td><pre> that<span class="token punctuation">.</span>options<span class="token punctuation">.</span>rawList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">raw<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="142"></td><td><pre> promises<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="143"></td><td><pre> <span class="token keyword">var</span> group <span class="token operator">=</span> index</pre></td></tr><tr><td data-num="144"></td><td><pre> <span class="token keyword">var</span> source</pre></td></tr><tr><td data-num="145"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>raw<span class="token punctuation">.</span>list<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="146"></td><td><pre> group <span class="token operator">=</span> <span class="token number">0</span></pre></td></tr><tr><td data-num="147"></td><td><pre> that<span class="token punctuation">.</span>group <span class="token operator">=</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="148"></td><td><pre> source <span class="token operator">=</span> <span class="token punctuation">[</span>raw<span class="token punctuation">]</span></pre></td></tr><tr><td data-num="149"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="150"></td><td><pre> that<span class="token punctuation">.</span>group <span class="token operator">=</span> <span class="token boolean">true</span></pre></td></tr><tr><td data-num="151"></td><td><pre> source <span class="token operator">=</span> raw<span class="token punctuation">.</span>list</pre></td></tr><tr><td data-num="152"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="153"></td><td><pre> utils<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">list</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="154"></td><td><pre> playlist<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>group<span class="token punctuation">,</span> list<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="155"></td><td><pre> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="156"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="157"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="158"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="159"></td><td><pre></pre></td></tr><tr><td data-num="160"></td><td><pre> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>promises<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="161"></td><td><pre> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="162"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="163"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="164"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="165"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="166"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="167"></td><td><pre> playlist<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="168"></td><td><pre> controller<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="169"></td><td><pre> that<span class="token punctuation">.</span><span class="token function">mode</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="170"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="171"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="172"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="173"></td><td><pre> <span class="token comment">// 根据模式切换当前曲目 index</span></pre></td></tr><tr><td data-num="174"></td><td><pre> <span class="token function-variable function">mode</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="175"></td><td><pre> <span class="token keyword">var</span> total <span class="token operator">=</span> playlist<span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="176"></td><td><pre></pre></td></tr><tr><td data-num="177"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>total <span class="token operator">||</span> playlist<span class="token punctuation">.</span>errnum <span class="token operator">==</span> total<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="178"></td><td><pre> <span class="token keyword">return</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="179"></td><td><pre></pre></td></tr><tr><td data-num="180"></td><td><pre> <span class="token keyword">var</span> step <span class="token operator">=</span> controller<span class="token punctuation">.</span>step <span class="token operator">==</span> <span class="token string">'next'</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span></pre></td></tr><tr><td data-num="181"></td><td><pre></pre></td></tr><tr><td data-num="182"></td><td><pre> <span class="token keyword">var</span> <span class="token function-variable function">next</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="183"></td><td><pre> <span class="token keyword">var</span> index <span class="token operator">=</span> playlist<span class="token punctuation">.</span>index <span class="token operator">+</span> step</pre></td></tr><tr><td data-num="184"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">></span> total <span class="token operator">||</span> index <span class="token operator"><</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="185"></td><td><pre> index <span class="token operator">=</span> controller<span class="token punctuation">.</span>step <span class="token operator">==</span> <span class="token string">'next'</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token operator">:</span> total <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="186"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="187"></td><td><pre> playlist<span class="token punctuation">.</span>index <span class="token operator">=</span> index<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="188"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="189"></td><td><pre></pre></td></tr><tr><td data-num="190"></td><td><pre> <span class="token keyword">var</span> <span class="token function-variable function">random</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="191"></td><td><pre> <span class="token keyword">var</span> p <span class="token operator">=</span> utils<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span>total<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="192"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>playlist<span class="token punctuation">.</span>index <span class="token operator">!==</span> p<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="193"></td><td><pre> playlist<span class="token punctuation">.</span>index <span class="token operator">=</span> p</pre></td></tr><tr><td data-num="194"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="195"></td><td><pre> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="196"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="197"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="198"></td><td><pre></pre></td></tr><tr><td data-num="199"></td><td><pre> <span class="token keyword">switch</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="200"></td><td><pre> <span class="token keyword">case</span> <span class="token string">'random'</span><span class="token operator">:</span></pre></td></tr><tr><td data-num="201"></td><td><pre> <span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="202"></td><td><pre> <span class="token keyword">break</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="203"></td><td><pre> <span class="token keyword">case</span> <span class="token string">'order'</span><span class="token operator">:</span></pre></td></tr><tr><td data-num="204"></td><td><pre> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="205"></td><td><pre> <span class="token keyword">break</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="206"></td><td><pre> <span class="token keyword">case</span> <span class="token string">'loop'</span><span class="token operator">:</span></pre></td></tr><tr><td data-num="207"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>controller<span class="token punctuation">.</span>step<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="208"></td><td><pre> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="209"></td><td><pre></pre></td></tr><tr><td data-num="210"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>playlist<span class="token punctuation">.</span>index <span class="token operator">==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="211"></td><td><pre> <span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="212"></td><td><pre> <span class="token keyword">break</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="213"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="214"></td><td><pre></pre></td></tr><tr><td data-num="215"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="216"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="217"></td><td><pre> <span class="token comment">// 直接设置当前曲目 index</span></pre></td></tr><tr><td data-num="218"></td><td><pre> <span class="token function-variable function">switch</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="219"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> index <span class="token operator">==</span> <span class="token string">'number'</span></pre></td></tr><tr><td data-num="220"></td><td><pre> <span class="token operator">&&</span> index <span class="token operator">!=</span> playlist<span class="token punctuation">.</span>index</pre></td></tr><tr><td data-num="221"></td><td><pre> <span class="token operator">&&</span> playlist<span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="222"></td><td><pre> <span class="token operator">&&</span> <span class="token operator">!</span>playlist<span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="223"></td><td><pre> playlist<span class="token punctuation">.</span>index <span class="token operator">=</span> index<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="224"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="225"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="226"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="227"></td><td><pre> <span class="token comment">// 更新 source 为当前曲目 index</span></pre></td></tr><tr><td data-num="228"></td><td><pre> <span class="token function-variable function">init</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="229"></td><td><pre> <span class="token keyword">var</span> item <span class="token operator">=</span> playlist<span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="230"></td><td><pre></pre></td></tr><tr><td data-num="231"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>item <span class="token operator">||</span> item<span class="token punctuation">[</span><span class="token string">'error'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="232"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">mode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="233"></td><td><pre> <span class="token keyword">return</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="234"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="235"></td><td><pre></pre></td></tr><tr><td data-num="236"></td><td><pre> <span class="token keyword">var</span> playing <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="237"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>source<span class="token punctuation">.</span>paused<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="238"></td><td><pre> playing <span class="token operator">=</span> <span class="token boolean">true</span></pre></td></tr><tr><td data-num="239"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="240"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="241"></td><td><pre></pre></td></tr><tr><td data-num="242"></td><td><pre> source<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">,</span> item<span class="token punctuation">.</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="243"></td><td><pre> source<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'title'</span><span class="token punctuation">,</span> item<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' - '</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>artist<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="244"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">volume</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'_PlayerVolume'</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">'0.7'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="245"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">muted</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'_PlayerMuted'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="246"></td><td><pre></pre></td></tr><tr><td data-num="247"></td><td><pre> progress<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="248"></td><td><pre></pre></td></tr><tr><td data-num="249"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">'audio'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="250"></td><td><pre> preview<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="251"></td><td><pre></pre></td></tr><tr><td data-num="252"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>playing <span class="token operator">==</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="253"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="254"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="255"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="256"></td><td><pre> <span class="token function-variable function">play</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="257"></td><td><pre> <span class="token constant">NOWPLAYING</span> <span class="token operator">&&</span> <span class="token constant">NOWPLAYING</span><span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="258"></td><td><pre></pre></td></tr><tr><td data-num="259"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>playlist<span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="260"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">mode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="261"></td><td><pre> <span class="token keyword">return</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="262"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="263"></td><td><pre> <span class="token keyword">var</span> that <span class="token operator">=</span> <span class="token keyword">this</span></pre></td></tr><tr><td data-num="264"></td><td><pre> source<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="265"></td><td><pre> playlist<span class="token punctuation">.</span><span class="token function">scroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="266"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="267"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="268"></td><td><pre> <span class="token function-variable function">pause</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="269"></td><td><pre> source<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="270"></td><td><pre> document<span class="token punctuation">.</span>title <span class="token operator">=</span> originTitle</pre></td></tr><tr><td data-num="271"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="272"></td><td><pre> <span class="token function-variable function">stop</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="273"></td><td><pre> source<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="274"></td><td><pre> source<span class="token punctuation">.</span>currentTime <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="275"></td><td><pre> document<span class="token punctuation">.</span>title <span class="token operator">=</span> originTitle<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="276"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="277"></td><td><pre> <span class="token function-variable function">seek</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">time</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="278"></td><td><pre> time <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>time<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="279"></td><td><pre> time <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>time<span class="token punctuation">,</span> source<span class="token punctuation">.</span>duration<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="280"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isNaN</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="281"></td><td><pre> time <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="282"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="283"></td><td><pre> source<span class="token punctuation">.</span>currentTime <span class="token operator">=</span> time<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="284"></td><td><pre> progress<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>time <span class="token operator">/</span> source<span class="token punctuation">.</span>duration<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="285"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="286"></td><td><pre> <span class="token function-variable function">muted</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">status</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="287"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>status <span class="token operator">==</span> <span class="token string">'muted'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="288"></td><td><pre> source<span class="token punctuation">.</span>muted <span class="token operator">=</span> status</pre></td></tr><tr><td data-num="289"></td><td><pre> store<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'_PlayerMuted'</span><span class="token punctuation">,</span> status<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="290"></td><td><pre> controller<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="291"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="292"></td><td><pre> store<span class="token punctuation">.</span><span class="token function">del</span><span class="token punctuation">(</span><span class="token string">'_PlayerMuted'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="293"></td><td><pre> source<span class="token punctuation">.</span>muted <span class="token operator">=</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="294"></td><td><pre> controller<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span>volume<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="295"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="296"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="297"></td><td><pre> <span class="token function-variable function">volume</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">percentage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="298"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isNaN</span><span class="token punctuation">(</span>percentage<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="299"></td><td><pre> controller<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>percentage<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="300"></td><td><pre> store<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'_PlayerVolume'</span><span class="token punctuation">,</span> percentage<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="301"></td><td><pre> source<span class="token punctuation">.</span>volume <span class="token operator">=</span> percentage</pre></td></tr><tr><td data-num="302"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="303"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="304"></td><td><pre> <span class="token function-variable function">mini</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="305"></td><td><pre> info<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="306"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="307"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="308"></td><td><pre></pre></td></tr><tr><td data-num="309"></td><td><pre> <span class="token keyword">var</span> info <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="310"></td><td><pre> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="311"></td><td><pre> <span class="token function-variable function">create</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="312"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="313"></td><td><pre> <span class="token keyword">return</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="314"></td><td><pre></pre></td></tr><tr><td data-num="315"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el <span class="token operator">=</span> t<span class="token punctuation">.</span><span class="token function">createChild</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="316"></td><td><pre> <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'player-info'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="317"></td><td><pre> <span class="token literal-property property">innerHTML</span><span class="token operator">:</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">'audio'</span> <span class="token operator">?</span> <span class="token string">'<div class="preview"></div>'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'<div class="controller"></div><div class="playlist"></div>'</span></pre></td></tr><tr><td data-num="318"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'after'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="319"></td><td><pre></pre></td></tr><tr><td data-num="320"></td><td><pre> preview<span class="token punctuation">.</span>el <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token string">".preview"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="321"></td><td><pre> playlist<span class="token punctuation">.</span>el <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token string">".playlist"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="322"></td><td><pre> controller<span class="token punctuation">.</span>el <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token string">".controller"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="323"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="324"></td><td><pre> <span class="token function-variable function">hide</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="325"></td><td><pre> <span class="token keyword">var</span> el <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el</pre></td></tr><tr><td data-num="326"></td><td><pre> el<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'hide'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="327"></td><td><pre> window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="328"></td><td><pre> el<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'show hide'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="329"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="330"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="331"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="332"></td><td><pre></pre></td></tr><tr><td data-num="333"></td><td><pre> <span class="token keyword">var</span> playlist <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="334"></td><td><pre> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="335"></td><td><pre> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="336"></td><td><pre> <span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="337"></td><td><pre> <span class="token literal-property property">errnum</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="338"></td><td><pre> <span class="token function-variable function">add</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">group<span class="token punctuation">,</span> list</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="339"></td><td><pre> <span class="token keyword">var</span> that <span class="token operator">=</span> <span class="token keyword">this</span></pre></td></tr><tr><td data-num="340"></td><td><pre> list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="341"></td><td><pre> item<span class="token punctuation">.</span>group <span class="token operator">=</span> group<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="342"></td><td><pre> item<span class="token punctuation">.</span>name <span class="token operator">=</span> item<span class="token punctuation">.</span>name <span class="token operator">||</span> item<span class="token punctuation">.</span>title <span class="token operator">||</span> <span class="token string">'Meida name'</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="343"></td><td><pre> item<span class="token punctuation">.</span>artist <span class="token operator">=</span> item<span class="token punctuation">.</span>artist <span class="token operator">||</span> item<span class="token punctuation">.</span>author <span class="token operator">||</span> <span class="token string">'Anonymous'</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="344"></td><td><pre> item<span class="token punctuation">.</span>cover <span class="token operator">=</span> item<span class="token punctuation">.</span>cover <span class="token operator">||</span> item<span class="token punctuation">.</span>pic<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="345"></td><td><pre> item<span class="token punctuation">.</span>type <span class="token operator">=</span> item<span class="token punctuation">.</span>type <span class="token operator">||</span> <span class="token string">'normal'</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="346"></td><td><pre></pre></td></tr><tr><td data-num="347"></td><td><pre> that<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="348"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="349"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="350"></td><td><pre> <span class="token function-variable function">clear</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="351"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="352"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">""</span></pre></td></tr><tr><td data-num="353"></td><td><pre></pre></td></tr><tr><td data-num="354"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="355"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span></pre></td></tr><tr><td data-num="356"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="357"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="358"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="359"></td><td><pre> <span class="token function-variable function">create</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="360"></td><td><pre> <span class="token keyword">var</span> el <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el</pre></td></tr><tr><td data-num="361"></td><td><pre></pre></td></tr><tr><td data-num="362"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="363"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>el<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="364"></td><td><pre> <span class="token keyword">return</span></pre></td></tr><tr><td data-num="365"></td><td><pre></pre></td></tr><tr><td data-num="366"></td><td><pre> <span class="token keyword">var</span> id <span class="token operator">=</span> <span class="token string">'list-'</span> <span class="token operator">+</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>_id <span class="token operator">+</span> <span class="token string">'-'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>group</pre></td></tr><tr><td data-num="367"></td><td><pre> <span class="token keyword">var</span> tab <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="368"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>tab<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="369"></td><td><pre> tab <span class="token operator">=</span> el<span class="token punctuation">.</span><span class="token function">createChild</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="370"></td><td><pre> <span class="token literal-property property">id</span><span class="token operator">:</span> id<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="371"></td><td><pre> <span class="token literal-property property">className</span><span class="token operator">:</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>group <span class="token operator">?</span> <span class="token string">'tab'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="372"></td><td><pre> <span class="token literal-property property">innerHTML</span><span class="token operator">:</span> <span class="token string">'<ol></ol>'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="373"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="374"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>group<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="375"></td><td><pre> tab<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-title'</span><span class="token punctuation">,</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>rawList<span class="token punctuation">[</span>item<span class="token punctuation">.</span>group<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">'title'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="376"></td><td><pre> <span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-id'</span><span class="token punctuation">,</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>_id<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="377"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="378"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="379"></td><td><pre></pre></td></tr><tr><td data-num="380"></td><td><pre> item<span class="token punctuation">.</span>el <span class="token operator">=</span> tab<span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token string">'ol'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">createChild</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="381"></td><td><pre> <span class="token literal-property property">title</span><span class="token operator">:</span> item<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' - '</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>artist<span class="token punctuation">,</span></pre></td></tr><tr><td data-num="382"></td><td><pre> <span class="token literal-property property">innerHTML</span><span class="token operator">:</span> <span class="token string">'<span class="info"><span>'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">'</span><span>'</span> <span class="token operator">+</span> item<span class="token punctuation">.</span>artist <span class="token operator">+</span> <span class="token string">'</span></span>'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="383"></td><td><pre> <span class="token function-variable function">onclick</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="384"></td><td><pre> <span class="token keyword">var</span> current <span class="token operator">=</span> event<span class="token punctuation">.</span>currentTarget<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="385"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>playlist<span class="token punctuation">.</span>index <span class="token operator">===</span> index <span class="token operator">&&</span> progress<span class="token punctuation">.</span>el<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="386"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>source<span class="token punctuation">.</span>paused<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="387"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="388"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="389"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">seek</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span>duration <span class="token operator">*</span> progress<span class="token punctuation">.</span><span class="token function">percent</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> current<span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="390"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="391"></td><td><pre> <span class="token keyword">return</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="392"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="393"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">switch</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="394"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="395"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="396"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="397"></td><td><pre></pre></td></tr><tr><td data-num="398"></td><td><pre> <span class="token keyword">return</span> item</pre></td></tr><tr><td data-num="399"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="400"></td><td><pre></pre></td></tr><tr><td data-num="401"></td><td><pre> <span class="token function">tabFormat</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="402"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="403"></td><td><pre> <span class="token function-variable function">current</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="404"></td><td><pre> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>index<span class="token punctuation">]</span></pre></td></tr><tr><td data-num="405"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="406"></td><td><pre> <span class="token function-variable function">scroll</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="407"></td><td><pre> <span class="token keyword">var</span> item <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="408"></td><td><pre> <span class="token keyword">var</span> li <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token string">'li.active'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="409"></td><td><pre> li <span class="token operator">&&</span> li<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="410"></td><td><pre> <span class="token keyword">var</span> tab <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token string">'.tab.active'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="411"></td><td><pre> tab <span class="token operator">&&</span> tab<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="412"></td><td><pre> li <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'.nav li'</span><span class="token punctuation">)</span><span class="token punctuation">[</span>item<span class="token punctuation">.</span>group<span class="token punctuation">]</span></pre></td></tr><tr><td data-num="413"></td><td><pre> li <span class="token operator">&&</span> li<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="414"></td><td><pre> tab <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'.tab'</span><span class="token punctuation">)</span><span class="token punctuation">[</span>item<span class="token punctuation">.</span>group<span class="token punctuation">]</span></pre></td></tr><tr><td data-num="415"></td><td><pre> tab <span class="token operator">&&</span> tab<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="416"></td><td><pre></pre></td></tr><tr><td data-num="417"></td><td><pre> <span class="token function">pageScroll</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>el<span class="token punctuation">,</span> item<span class="token punctuation">.</span>el<span class="token punctuation">.</span>offsetTop<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="418"></td><td><pre></pre></td></tr><tr><td data-num="419"></td><td><pre> <span class="token keyword">return</span> <span class="token keyword">this</span></pre></td></tr><tr><td data-num="420"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="421"></td><td><pre> <span class="token function-variable function">title</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="422"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>source<span class="token punctuation">.</span>paused<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="423"></td><td><pre> <span class="token keyword">return</span></pre></td></tr><tr><td data-num="424"></td><td><pre></pre></td></tr><tr><td data-num="425"></td><td><pre> <span class="token keyword">var</span> current <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="426"></td><td><pre> document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'Now Playing...'</span> <span class="token operator">+</span> current<span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">' - '</span> <span class="token operator">+</span> current<span class="token punctuation">[</span><span class="token string">'artist'</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">' | '</span> <span class="token operator">+</span> originTitle<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="427"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="428"></td><td><pre> <span class="token function-variable function">error</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="429"></td><td><pre> <span class="token keyword">var</span> current <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="430"></td><td><pre> current<span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="431"></td><td><pre> current<span class="token punctuation">.</span>error <span class="token operator">=</span> <span class="token boolean">true</span></pre></td></tr><tr><td data-num="432"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>errnum<span class="token operator">++</span></pre></td></tr><tr><td data-num="433"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="434"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="435"></td><td><pre></pre></td></tr><tr><td data-num="436"></td><td><pre> <span class="token keyword">var</span> lyrics <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="437"></td><td><pre> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="438"></td><td><pre> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="439"></td><td><pre> <span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="440"></td><td><pre> <span class="token function-variable function">create</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">box</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="441"></td><td><pre> <span class="token keyword">var</span> current <span class="token operator">=</span> playlist<span class="token punctuation">.</span>index</pre></td></tr><tr><td data-num="442"></td><td><pre> <span class="token keyword">var</span> that <span class="token operator">=</span> <span class="token keyword">this</span></pre></td></tr><tr><td data-num="443"></td><td><pre> <span class="token keyword">var</span> raw <span class="token operator">=</span> playlist<span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>lrc</pre></td></tr><tr><td data-num="444"></td><td><pre></pre></td></tr><tr><td data-num="445"></td><td><pre> <span class="token keyword">var</span> <span class="token function-variable function">callback</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">body</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="446"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>current <span class="token operator">!==</span> playlist<span class="token punctuation">.</span>index<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="447"></td><td><pre> <span class="token keyword">return</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="448"></td><td><pre></pre></td></tr><tr><td data-num="449"></td><td><pre> that<span class="token punctuation">.</span>data <span class="token operator">=</span> that<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>body<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="450"></td><td><pre></pre></td></tr><tr><td data-num="451"></td><td><pre> <span class="token keyword">var</span> lrc <span class="token operator">=</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="452"></td><td><pre> that<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">line<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="453"></td><td><pre> lrc <span class="token operator">+=</span> <span class="token string">'<p'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token string">' class="current"'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'>'</span> <span class="token operator">+</span> line<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">'</p>'</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="454"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="455"></td><td><pre></pre></td></tr><tr><td data-num="456"></td><td><pre> that<span class="token punctuation">.</span>el <span class="token operator">=</span> box<span class="token punctuation">.</span><span class="token function">createChild</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="457"></td><td><pre> <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'inner'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="458"></td><td><pre> <span class="token literal-property property">innerHTML</span><span class="token operator">:</span> lrc</pre></td></tr><tr><td data-num="459"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'replace'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="460"></td><td><pre></pre></td></tr><tr><td data-num="461"></td><td><pre> that<span class="token punctuation">.</span>index <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="462"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="463"></td><td><pre></pre></td></tr><tr><td data-num="464"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>raw <span class="token operator">&&</span> raw<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">'http'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="465"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span>raw<span class="token punctuation">,</span> callback<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="466"></td><td><pre> <span class="token keyword">else</span></pre></td></tr><tr><td data-num="467"></td><td><pre> <span class="token function">callback</span><span class="token punctuation">(</span>raw<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="468"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="469"></td><td><pre> <span class="token function-variable function">update</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">currentTime</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="470"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="471"></td><td><pre> <span class="token keyword">return</span></pre></td></tr><tr><td data-num="472"></td><td><pre></pre></td></tr><tr><td data-num="473"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">||</span> currentTime <span class="token operator"><</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">||</span> currentTime <span class="token operator">>=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="474"></td><td><pre> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="475"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>currentTime <span class="token operator">>=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&&</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">||</span> currentTime <span class="token operator"><</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="476"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">=</span> i<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="477"></td><td><pre> <span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token operator">-</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>index <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="478"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform <span class="token operator">=</span> <span class="token string">'translateY('</span> <span class="token operator">+</span> y <span class="token operator">+</span> <span class="token string">'rem)'</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="479"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>webkitTransform <span class="token operator">=</span> <span class="token string">'translateY('</span> <span class="token operator">+</span> y <span class="token operator">+</span> <span class="token string">'rem)'</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="480"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="481"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="482"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="483"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="484"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="485"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="486"></td><td><pre> <span class="token function-variable function">parse</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">lrc_s</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="487"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>lrc_s<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="488"></td><td><pre> lrc_s <span class="token operator">=</span> lrc_s<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">([^\]^\n])\[</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">match<span class="token punctuation">,</span> p1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> p1 <span class="token operator">+</span> <span class="token string">'\n['</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="489"></td><td><pre> <span class="token keyword">const</span> lyric <span class="token operator">=</span> lrc_s<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="490"></td><td><pre> <span class="token keyword">var</span> lrc <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="491"></td><td><pre> <span class="token keyword">const</span> lyricLen <span class="token operator">=</span> lyric<span class="token punctuation">.</span>length<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="492"></td><td><pre> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> lyricLen<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="493"></td><td><pre> <span class="token comment">// match lrc time</span></pre></td></tr><tr><td data-num="494"></td><td><pre> <span class="token keyword">const</span> lrcTimes <span class="token operator">=</span> lyric<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\[(\d{2}):(\d{2})(\.(\d{2,3}))?]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="495"></td><td><pre> <span class="token comment">// match lrc text</span></pre></td></tr><tr><td data-num="496"></td><td><pre> <span class="token keyword">const</span> lrcText <span class="token operator">=</span> lyric<span class="token punctuation">[</span>i<span class="token punctuation">]</span></pre></td></tr><tr><td data-num="497"></td><td><pre> <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">.*\[(\d{2}):(\d{2})(\.(\d{2,3}))?]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="498"></td><td><pre> <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><(\d{2}):(\d{2})(\.(\d{2,3}))?></span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="499"></td><td><pre> <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\s+|\s+$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="500"></td><td><pre></pre></td></tr><tr><td data-num="501"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>lrcTimes<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="502"></td><td><pre> <span class="token comment">// handle multiple time tag</span></pre></td></tr><tr><td data-num="503"></td><td><pre> <span class="token keyword">const</span> timeLen <span class="token operator">=</span> lrcTimes<span class="token punctuation">.</span>length<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="504"></td><td><pre> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> timeLen<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="505"></td><td><pre> <span class="token keyword">const</span> oneTime <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\[(\d{2}):(\d{2})(\.(\d{2,3}))?]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>lrcTimes<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="506"></td><td><pre> <span class="token keyword">const</span> min2sec <span class="token operator">=</span> oneTime<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">*</span> <span class="token number">60</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="507"></td><td><pre> <span class="token keyword">const</span> sec2sec <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>oneTime<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="508"></td><td><pre> <span class="token keyword">const</span> msec2sec <span class="token operator">=</span> oneTime<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>oneTime<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>oneTime<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">2</span> <span class="token operator">?</span> <span class="token number">100</span> <span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="509"></td><td><pre> <span class="token keyword">const</span> lrcTime <span class="token operator">=</span> min2sec <span class="token operator">+</span> sec2sec <span class="token operator">+</span> msec2sec<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="510"></td><td><pre> lrc<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span>lrcTime<span class="token punctuation">,</span> lrcText<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="511"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="512"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="513"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="514"></td><td><pre> <span class="token comment">// sort by time</span></pre></td></tr><tr><td data-num="515"></td><td><pre> lrc <span class="token operator">=</span> lrc<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="516"></td><td><pre> lrc<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">-</span> b<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="517"></td><td><pre> <span class="token keyword">return</span> lrc<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="518"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="519"></td><td><pre> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="520"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="521"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="522"></td><td><pre> <span class="token function-variable function">fetch</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="523"></td><td><pre> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="524"></td><td><pre> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="525"></td><td><pre> <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="526"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">body</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="527"></td><td><pre> <span class="token function">callback</span><span class="token punctuation">(</span>body<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="528"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">ex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="529"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="530"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="531"></td><td><pre></pre></td></tr><tr><td data-num="532"></td><td><pre> <span class="token keyword">var</span> preview <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="533"></td><td><pre> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="534"></td><td><pre> <span class="token function-variable function">create</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="535"></td><td><pre> <span class="token keyword">var</span> current <span class="token operator">=</span> playlist<span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="536"></td><td><pre></pre></td></tr><tr><td data-num="537"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'<div class="cover"><div class="disc"><img src="'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>current<span class="token punctuation">.</span>cover<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'" class="blur" /></div></div>'</span></pre></td></tr><tr><td data-num="538"></td><td><pre> <span class="token operator">+</span> <span class="token string">'<div class="info"><h4 class="title">'</span> <span class="token operator">+</span> current<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">'</h4><span>'</span> <span class="token operator">+</span> current<span class="token punctuation">.</span>artist <span class="token operator">+</span> <span class="token string">'</span>'</span></pre></td></tr><tr><td data-num="539"></td><td><pre> <span class="token operator">+</span> <span class="token string">'<div class="lrc"></div></div>'</span></pre></td></tr><tr><td data-num="540"></td><td><pre></pre></td></tr><tr><td data-num="541"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token string">'.cover'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>events<span class="token punctuation">[</span><span class="token string">'play-pause'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="542"></td><td><pre></pre></td></tr><tr><td data-num="543"></td><td><pre> lyrics<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token string">'.lrc'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="544"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="545"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="546"></td><td><pre></pre></td></tr><tr><td data-num="547"></td><td><pre> <span class="token keyword">var</span> progress <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="548"></td><td><pre> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="549"></td><td><pre> <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="550"></td><td><pre> <span class="token function-variable function">create</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="551"></td><td><pre> <span class="token keyword">var</span> current <span class="token operator">=</span> playlist<span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>el</pre></td></tr><tr><td data-num="552"></td><td><pre></pre></td></tr><tr><td data-num="553"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>current<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="554"></td><td><pre></pre></td></tr><tr><td data-num="555"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="556"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="557"></td><td><pre> <span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragStart<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>drag<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="558"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="559"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="560"></td><td><pre></pre></td></tr><tr><td data-num="561"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el <span class="token operator">=</span> current<span class="token punctuation">.</span><span class="token function">createChild</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="562"></td><td><pre> <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'progress'</span></pre></td></tr><tr><td data-num="563"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="564"></td><td><pre></pre></td></tr><tr><td data-num="565"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-dtime'</span><span class="token punctuation">,</span> utils<span class="token punctuation">.</span><span class="token function">secondToTime</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="566"></td><td><pre></pre></td></tr><tr><td data-num="567"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>bar <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">createChild</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="568"></td><td><pre> <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="569"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="570"></td><td><pre></pre></td></tr><tr><td data-num="571"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'current'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="572"></td><td><pre></pre></td></tr><tr><td data-num="573"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragStart<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>drag<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="574"></td><td><pre></pre></td></tr><tr><td data-num="575"></td><td><pre> playlist<span class="token punctuation">.</span><span class="token function">scroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="576"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="577"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="578"></td><td><pre> <span class="token function-variable function">update</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">percent</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="579"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>bar<span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>percent <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="580"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-ptime'</span><span class="token punctuation">,</span> utils<span class="token punctuation">.</span><span class="token function">secondToTime</span><span class="token punctuation">(</span>percent <span class="token operator">*</span> source<span class="token punctuation">.</span>duration<span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="581"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="582"></td><td><pre> <span class="token function-variable function">seeking</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="583"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="584"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'seeking'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="585"></td><td><pre> <span class="token keyword">else</span></pre></td></tr><tr><td data-num="586"></td><td><pre> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'seeking'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="587"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="588"></td><td><pre> <span class="token function-variable function">percent</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="589"></td><td><pre> <span class="token keyword">var</span> percentage <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>clientX <span class="token operator">||</span> e<span class="token punctuation">.</span>changedTouches<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>clientX<span class="token punctuation">)</span> <span class="token operator">-</span> el<span class="token punctuation">.</span><span class="token function">left</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">/</span> el<span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="590"></td><td><pre> percentage <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>percentage<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="591"></td><td><pre> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>percentage<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="592"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="593"></td><td><pre> <span class="token function-variable function">drag</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="594"></td><td><pre> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="595"></td><td><pre></pre></td></tr><tr><td data-num="596"></td><td><pre> <span class="token keyword">var</span> current <span class="token operator">=</span> playlist<span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>el</pre></td></tr><tr><td data-num="597"></td><td><pre></pre></td></tr><tr><td data-num="598"></td><td><pre> <span class="token keyword">var</span> <span class="token function-variable function">thumbMove</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="599"></td><td><pre> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="600"></td><td><pre> <span class="token keyword">var</span> percentage <span class="token operator">=</span> progress<span class="token punctuation">.</span><span class="token function">percent</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> current<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="601"></td><td><pre> progress<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>percentage<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="602"></td><td><pre> lyrics<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>percentage <span class="token operator">*</span> source<span class="token punctuation">.</span>duration<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="603"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="604"></td><td><pre></pre></td></tr><tr><td data-num="605"></td><td><pre> <span class="token keyword">var</span> <span class="token function-variable function">thumbUp</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="606"></td><td><pre> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="607"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragEnd<span class="token punctuation">,</span> thumbUp<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="608"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragMove<span class="token punctuation">,</span> thumbMove<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="609"></td><td><pre> <span class="token keyword">var</span> percentage <span class="token operator">=</span> progress<span class="token punctuation">.</span><span class="token function">percent</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> current<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="610"></td><td><pre> progress<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>percentage<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="611"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">seek</span><span class="token punctuation">(</span>percentage <span class="token operator">*</span> source<span class="token punctuation">.</span>duration<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="612"></td><td><pre> source<span class="token punctuation">.</span>disableTimeupdate <span class="token operator">=</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="613"></td><td><pre> progress<span class="token punctuation">.</span><span class="token function">seeking</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="614"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="615"></td><td><pre></pre></td></tr><tr><td data-num="616"></td><td><pre> source<span class="token punctuation">.</span>disableTimeupdate <span class="token operator">=</span> <span class="token boolean">true</span></pre></td></tr><tr><td data-num="617"></td><td><pre> progress<span class="token punctuation">.</span><span class="token function">seeking</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="618"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragMove<span class="token punctuation">,</span> thumbMove<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="619"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragEnd<span class="token punctuation">,</span> thumbUp<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="620"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="621"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="622"></td><td><pre></pre></td></tr><tr><td data-num="623"></td><td><pre> <span class="token keyword">var</span> controller <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="624"></td><td><pre> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="625"></td><td><pre> <span class="token literal-property property">btns</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="626"></td><td><pre> <span class="token literal-property property">step</span><span class="token operator">:</span> <span class="token string">'next'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="627"></td><td><pre> <span class="token function-variable function">create</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="628"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>controls<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="629"></td><td><pre> <span class="token keyword">return</span></pre></td></tr><tr><td data-num="630"></td><td><pre></pre></td></tr><tr><td data-num="631"></td><td><pre> <span class="token keyword">var</span> that <span class="token operator">=</span> <span class="token keyword">this</span></pre></td></tr><tr><td data-num="632"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>controls<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="633"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>btns<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="634"></td><td><pre> <span class="token keyword">return</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="635"></td><td><pre></pre></td></tr><tr><td data-num="636"></td><td><pre> <span class="token keyword">var</span> opt <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="637"></td><td><pre> <span class="token function-variable function">onclick</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="638"></td><td><pre> that<span class="token punctuation">.</span>events<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">?</span> that<span class="token punctuation">.</span>events<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">:</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>events<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="639"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="640"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="641"></td><td><pre></pre></td></tr><tr><td data-num="642"></td><td><pre> <span class="token keyword">switch</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="643"></td><td><pre> <span class="token keyword">case</span> <span class="token string">'volume'</span><span class="token operator">:</span></pre></td></tr><tr><td data-num="644"></td><td><pre> opt<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>source<span class="token punctuation">.</span>muted <span class="token operator">?</span> <span class="token string">'off'</span> <span class="token operator">:</span> <span class="token string">'on'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="645"></td><td><pre> opt<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'<div class="bar"></div>'</span></pre></td></tr><tr><td data-num="646"></td><td><pre> opt<span class="token punctuation">[</span><span class="token string">'on'</span> <span class="token operator">+</span> utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragStart<span class="token punctuation">]</span> <span class="token operator">=</span> that<span class="token punctuation">.</span>events<span class="token punctuation">[</span><span class="token string">'volume'</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="647"></td><td><pre> opt<span class="token punctuation">.</span>onclick <span class="token operator">=</span> <span class="token keyword">null</span></pre></td></tr><tr><td data-num="648"></td><td><pre> <span class="token keyword">break</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="649"></td><td><pre> <span class="token keyword">case</span> <span class="token string">'mode'</span><span class="token operator">:</span></pre></td></tr><tr><td data-num="650"></td><td><pre> opt<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">' '</span> <span class="token operator">+</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode</pre></td></tr><tr><td data-num="651"></td><td><pre> <span class="token keyword">break</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="652"></td><td><pre> <span class="token keyword">default</span><span class="token operator">:</span></pre></td></tr><tr><td data-num="653"></td><td><pre> opt<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">''</span></pre></td></tr><tr><td data-num="654"></td><td><pre> <span class="token keyword">break</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="655"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="656"></td><td><pre></pre></td></tr><tr><td data-num="657"></td><td><pre> opt<span class="token punctuation">.</span>className <span class="token operator">=</span> item <span class="token operator">+</span> opt<span class="token punctuation">.</span>className <span class="token operator">+</span> <span class="token string">' btn'</span></pre></td></tr><tr><td data-num="658"></td><td><pre></pre></td></tr><tr><td data-num="659"></td><td><pre> that<span class="token punctuation">.</span>btns<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> that<span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">createChild</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">,</span> opt<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="660"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="661"></td><td><pre></pre></td></tr><tr><td data-num="662"></td><td><pre> that<span class="token punctuation">.</span>btns<span class="token punctuation">[</span><span class="token string">'volume'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>bar <span class="token operator">=</span> that<span class="token punctuation">.</span>btns<span class="token punctuation">[</span><span class="token string">'volume'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span><span class="token string">'.bar'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="663"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="664"></td><td><pre> <span class="token literal-property property">events</span><span class="token operator">:</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="665"></td><td><pre> <span class="token function-variable function">mode</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="666"></td><td><pre> <span class="token keyword">switch</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="667"></td><td><pre> <span class="token keyword">case</span> <span class="token string">'loop'</span><span class="token operator">:</span></pre></td></tr><tr><td data-num="668"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode <span class="token operator">=</span> <span class="token string">'random'</span></pre></td></tr><tr><td data-num="669"></td><td><pre> <span class="token keyword">break</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="670"></td><td><pre> <span class="token keyword">case</span> <span class="token string">'random'</span><span class="token operator">:</span></pre></td></tr><tr><td data-num="671"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode <span class="token operator">=</span> <span class="token string">'order'</span></pre></td></tr><tr><td data-num="672"></td><td><pre> <span class="token keyword">break</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="673"></td><td><pre> <span class="token keyword">default</span><span class="token operator">:</span></pre></td></tr><tr><td data-num="674"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode <span class="token operator">=</span> <span class="token string">'loop'</span></pre></td></tr><tr><td data-num="675"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="676"></td><td><pre></pre></td></tr><tr><td data-num="677"></td><td><pre> controller<span class="token punctuation">.</span>btns<span class="token punctuation">[</span><span class="token string">'mode'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">'mode '</span> <span class="token operator">+</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode <span class="token operator">+</span> <span class="token string">' btn'</span></pre></td></tr><tr><td data-num="678"></td><td><pre> store<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'_PlayerMode'</span><span class="token punctuation">,</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="679"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="680"></td><td><pre> <span class="token function-variable function">volume</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="681"></td><td><pre> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="682"></td><td><pre></pre></td></tr><tr><td data-num="683"></td><td><pre> <span class="token keyword">var</span> current <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget</pre></td></tr><tr><td data-num="684"></td><td><pre></pre></td></tr><tr><td data-num="685"></td><td><pre> <span class="token keyword">var</span> drag <span class="token operator">=</span> <span class="token boolean">false</span></pre></td></tr><tr><td data-num="686"></td><td><pre></pre></td></tr><tr><td data-num="687"></td><td><pre> <span class="token keyword">var</span> <span class="token function-variable function">thumbMove</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="688"></td><td><pre> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="689"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">volume</span><span class="token punctuation">(</span>controller<span class="token punctuation">.</span><span class="token function">percent</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> current<span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="690"></td><td><pre> drag <span class="token operator">=</span> <span class="token boolean">true</span></pre></td></tr><tr><td data-num="691"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="692"></td><td><pre></pre></td></tr><tr><td data-num="693"></td><td><pre> <span class="token keyword">var</span> <span class="token function-variable function">thumbUp</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="694"></td><td><pre> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="695"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragEnd<span class="token punctuation">,</span> thumbUp<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="696"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragMove<span class="token punctuation">,</span> thumbMove<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="697"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>drag<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="698"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">muted</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="699"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">volume</span><span class="token punctuation">(</span>controller<span class="token punctuation">.</span><span class="token function">percent</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> current<span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="700"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="701"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>source<span class="token punctuation">.</span>muted<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="702"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">muted</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="703"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">volume</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span>volume<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="704"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="705"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">muted</span><span class="token punctuation">(</span><span class="token string">'muted'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="706"></td><td><pre> controller<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="707"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="708"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="709"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="710"></td><td><pre></pre></td></tr><tr><td data-num="711"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragMove<span class="token punctuation">,</span> thumbMove<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="712"></td><td><pre> current<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>utils<span class="token punctuation">.</span>nameMap<span class="token punctuation">.</span>dragEnd<span class="token punctuation">,</span> thumbUp<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="713"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="714"></td><td><pre> <span class="token function-variable function">backward</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="715"></td><td><pre> controller<span class="token punctuation">.</span>step <span class="token operator">=</span> <span class="token string">'prev'</span></pre></td></tr><tr><td data-num="716"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">mode</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="717"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="718"></td><td><pre> <span class="token function-variable function">forward</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="719"></td><td><pre> controller<span class="token punctuation">.</span>step <span class="token operator">=</span> <span class="token string">'next'</span></pre></td></tr><tr><td data-num="720"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">mode</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="721"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="722"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="723"></td><td><pre> <span class="token function-variable function">update</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">percent</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="724"></td><td><pre> controller<span class="token punctuation">.</span>btns<span class="token punctuation">[</span><span class="token string">'volume'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">'volume '</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token operator">!</span>source<span class="token punctuation">.</span>muted <span class="token operator">&&</span> percent <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token string">'on'</span> <span class="token operator">:</span> <span class="token string">'off'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">' btn'</span></pre></td></tr><tr><td data-num="725"></td><td><pre> controller<span class="token punctuation">.</span>btns<span class="token punctuation">[</span><span class="token string">'volume'</span><span class="token punctuation">]</span><span class="token punctuation">.</span>bar<span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>percent <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="726"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="727"></td><td><pre> <span class="token function-variable function">percent</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="728"></td><td><pre> <span class="token keyword">var</span> percentage <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>clientX <span class="token operator">||</span> e<span class="token punctuation">.</span>changedTouches<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>clientX<span class="token punctuation">)</span> <span class="token operator">-</span> el<span class="token punctuation">.</span><span class="token function">left</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">/</span> el<span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="729"></td><td><pre> percentage <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>percentage<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="730"></td><td><pre> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>percentage<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="731"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="732"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="733"></td><td><pre></pre></td></tr><tr><td data-num="734"></td><td><pre> <span class="token keyword">var</span> events <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="735"></td><td><pre> <span class="token function-variable function">onerror</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="736"></td><td><pre> <span class="token comment">// 自己修改 - start</span></pre></td></tr><tr><td data-num="737"></td><td><pre> <span class="token keyword">var</span> item <span class="token operator">=</span> playlist<span class="token punctuation">.</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="738"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>item<span class="token punctuation">.</span>repair <span class="token operator">&&</span> item<span class="token punctuation">.</span>company <span class="token operator">&&</span> item<span class="token punctuation">.</span>company <span class="token operator">==</span> <span class="token string">"netease"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="739"></td><td><pre> <span class="token keyword">var</span> id <span class="token operator">=</span> item<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">"id="</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">3</span><span class="token punctuation">,</span> item<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">"&auth="</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="740"></td><td><pre> item<span class="token punctuation">.</span>url <span class="token operator">=</span> <span class="token string">"https://music.163.com/song/media/outer/url?id="</span> <span class="token operator">+</span> id<span class="token punctuation">;</span> <span class="token comment">// 修正的网易云 url</span></pre></td></tr><tr><td data-num="741"></td><td><pre> item<span class="token punctuation">.</span>pic <span class="token operator">=</span> <span class="token string">"https://p3.music.126.net/Vji3PQJAZ2C7gS_6X51NFQ==/109951164723650033.jpg?param=200y200"</span><span class="token punctuation">;</span> <span class="token comment">// 使用网易云上固定的一张封面</span></pre></td></tr><tr><td data-num="742"></td><td><pre> item<span class="token punctuation">.</span>cover <span class="token operator">=</span> item<span class="token punctuation">.</span>pic<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="743"></td><td><pre> item<span class="token punctuation">.</span>repair <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// 已修正</span></pre></td></tr><tr><td data-num="744"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 重新播放</span></pre></td></tr><tr><td data-num="745"></td><td><pre> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="746"></td><td><pre> playlist<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="747"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">mode</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="748"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="749"></td><td><pre> <span class="token comment">// 自己修改 - end</span></pre></td></tr><tr><td data-num="750"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="751"></td><td><pre> <span class="token function-variable function">ondurationchange</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="752"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>source<span class="token punctuation">.</span>duration <span class="token operator">!==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="753"></td><td><pre> progress<span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-dtime'</span><span class="token punctuation">,</span> utils<span class="token punctuation">.</span><span class="token function">secondToTime</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span>duration<span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="754"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="755"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="756"></td><td><pre> <span class="token function-variable function">onloadedmetadata</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="757"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">seek</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="758"></td><td><pre> progress<span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-dtime'</span><span class="token punctuation">,</span> utils<span class="token punctuation">.</span><span class="token function">secondToTime</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span>duration<span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="759"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="760"></td><td><pre> <span class="token function-variable function">onplay</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="761"></td><td><pre> t<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'playing'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="762"></td><td><pre> <span class="token function">showtip</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'title'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="763"></td><td><pre> <span class="token constant">NOWPLAYING</span> <span class="token operator">=</span> t</pre></td></tr><tr><td data-num="764"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="765"></td><td><pre> <span class="token function-variable function">onpause</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="766"></td><td><pre> t<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'playing'</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="767"></td><td><pre> <span class="token constant">NOWPLAYING</span> <span class="token operator">=</span> <span class="token keyword">null</span></pre></td></tr><tr><td data-num="768"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="769"></td><td><pre> <span class="token function-variable function">ontimeupdate</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="770"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>disableTimeupdate<span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="771"></td><td><pre> progress<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>currentTime <span class="token operator">/</span> <span class="token keyword">this</span><span class="token punctuation">.</span>duration<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="772"></td><td><pre> lyrics<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>currentTime<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="773"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="774"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="775"></td><td><pre> <span class="token function-variable function">onended</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">argument</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="776"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">mode</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="777"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="778"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="779"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="780"></td><td><pre></pre></td></tr><tr><td data-num="781"></td><td><pre> <span class="token keyword">var</span> buttons <span class="token operator">=</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="782"></td><td><pre> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="783"></td><td><pre> <span class="token function-variable function">create</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="784"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>btns<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="785"></td><td><pre> <span class="token keyword">return</span></pre></td></tr><tr><td data-num="786"></td><td><pre></pre></td></tr><tr><td data-num="787"></td><td><pre> <span class="token keyword">var</span> that <span class="token operator">=</span> <span class="token keyword">this</span></pre></td></tr><tr><td data-num="788"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>btns<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="789"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>that<span class="token punctuation">.</span>el<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="790"></td><td><pre> <span class="token keyword">return</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="791"></td><td><pre></pre></td></tr><tr><td data-num="792"></td><td><pre> that<span class="token punctuation">.</span>el<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> t<span class="token punctuation">.</span><span class="token function">createChild</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="793"></td><td><pre> <span class="token literal-property property">className</span><span class="token operator">:</span> item <span class="token operator">+</span> <span class="token string">' btn'</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="794"></td><td><pre> <span class="token function-variable function">onclick</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="795"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="796"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>events<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="797"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="798"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="799"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="800"></td><td><pre> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="801"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="802"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="803"></td><td><pre></pre></td></tr><tr><td data-num="804"></td><td><pre> <span class="token keyword">var</span> <span class="token function-variable function">init</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></pre></td></tr><tr><td data-num="805"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>created<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="806"></td><td><pre> <span class="token keyword">return</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="807"></td><td><pre></pre></td></tr><tr><td data-num="808"></td><td><pre></pre></td></tr><tr><td data-num="809"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> config<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="810"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'_PlayerMode'</span><span class="token punctuation">)</span> <span class="token operator">||</span> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>mode</pre></td></tr><tr><td data-num="811"></td><td><pre></pre></td></tr><tr><td data-num="812"></td><td><pre> <span class="token comment">// 初始化 button、controls 以及 click 事件</span></pre></td></tr><tr><td data-num="813"></td><td><pre> buttons<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="814"></td><td><pre></pre></td></tr><tr><td data-num="815"></td><td><pre> <span class="token comment">// 初始化 audio or video</span></pre></td></tr><tr><td data-num="816"></td><td><pre> source <span class="token operator">=</span> t<span class="token punctuation">.</span><span class="token function">createChild</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>type<span class="token punctuation">,</span> events<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="817"></td><td><pre> <span class="token comment">// 初始化播放列表、预览、控件按钮等</span></pre></td></tr><tr><td data-num="818"></td><td><pre> info<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="819"></td><td><pre></pre></td></tr><tr><td data-num="820"></td><td><pre> t<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>options<span class="token punctuation">.</span>type<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="821"></td><td><pre></pre></td></tr><tr><td data-num="822"></td><td><pre> t<span class="token punctuation">.</span>player<span class="token punctuation">.</span>created <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="823"></td><td><pre> <span class="token punctuation">}</span></pre></td></tr><tr><td data-num="824"></td><td><pre></pre></td></tr><tr><td data-num="825"></td><td><pre> <span class="token function">init</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="826"></td><td><pre></pre></td></tr><tr><td data-num="827"></td><td><pre> <span class="token keyword">return</span> t<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="828"></td><td><pre><span class="token punctuation">}</span></pre></td></tr></table></figure><div class="tags"><a href="/tags/%E5%8D%9A%E5%AE%A2/" rel="tag"><i class="ic i-tag"></i> 博客</a> <a href="/tags/Hexo/" rel="tag"><i class="ic i-tag"></i> Hexo</a> <a href="/tags/Shoka/" rel="tag"><i class="ic i-tag"></i> Shoka</a> <a href="/tags/%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90/" rel="tag"><i class="ic i-tag"></i> 背景音乐</a></div></div><footer><div class="meta"><span class="item"><span class="icon"><i class="ic i-calendar-check"></i> </span><span class="text">更新于</span> <time title="修改时间：2022-11-11 12:42:29" itemprop="dateModified" datetime="2022-11-11T12:42:29+08:00">2022-11-11</time> </span><span id="2022/09/26/解决Hexo-Shoka背景音乐无法播放的问题/" class="item leancloud_visitors" data-flag-title="解决 Hexo+Shoka 背景音乐无法播放的问题" title="阅读次数"><span class="icon"><i class="ic i-eye"></i> </span><span class="text">阅读次数</span> <span class="leancloud-visitors-count"></span> <span class="text">次</span></span></div><div class="reward"><button><i class="ic i-heartbeat"></i> 赞赏</button><p>请我喝[茶]~(￣▽￣)~*</p><div id="qr"><div><img data-src="/images/wechatpay.png" alt="Hito Li 微信支付"><p>微信支付</p></div><div><img data-src="/images/alipay.png" alt="Hito Li 支付宝"><p>支付宝</p></div></div></div><div id="copyright"><ul><li class="author"><strong>本文作者： </strong>Hito li <i class="ic i-at"><em>@</em></i>涛声依旧</li><li class="link"><strong>本文链接：</strong> <a href="https://hitoli.com/2022/09/26/%E8%A7%A3%E5%86%B3Hexo-Shoka%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90%E6%97%A0%E6%B3%95%E6%92%AD%E6%94%BE%E7%9A%84%E9%97%AE%E9%A2%98/" title="解决 Hexo+Shoka 背景音乐无法播放的问题">https://hitoli.com/2022/09/26/解决Hexo-Shoka背景音乐无法播放的问题/</a></li><li class="license"><strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！</li></ul></div></footer></article></div><div class="post-nav"><div class="item left"><a href="/2022/09/23/%E8%A7%A3%E5%86%B3%E5%9F%9F%E5%90%8Dip%E5%8F%98%E5%8A%A8%E5%90%8E%E9%9C%80%E8%A6%81%E9%87%8D%E5%90%AFnginx%E7%9A%84%E9%97%AE%E9%A2%98/" itemprop="url" rel="prev" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipex2cdtbj20zk0m8x6p.jpg" title="解决域名ip变动后需要重启nginx的问题"><span class="type">上一篇</span> <span class="category"><i class="ic i-flag"></i> Nginx</span><h3>解决域名ip变动后需要重启nginx的问题</h3></a></div><div class="item right"><a href="/2022/09/27/nginx%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1%E9%85%8D%E7%BD%AE/" itemprop="url" rel="next" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipeun65urj20zk0m81ii.jpg" title="nginx负载均衡配置"><span class="type">下一篇</span> <span class="category"><i class="ic i-flag"></i> Nginx</span><h3>nginx负载均衡配置</h3></a></div></div><div class="wrap" id="comments"></div></div><div id="sidebar"><div class="inner"><div class="panels"><div class="inner"><div class="contents panel pjax" data-title="文章目录"><ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0"><span class="toc-number">1.</span> <span class="toc-text">问题描述</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">解决方法</span></a></li></ol></div><div class="related panel pjax" data-title="系列文章"><ul><li><a href="/2022/09/14/Hexo%E5%AE%89%E8%A3%85%E6%91%B8%E7%B4%A2/" rel="bookmark" title="Hexo安装摸索">Hexo安装摸索</a></li><li><a href="/2022/09/17/Hexo-Theme-Shoka-algolia%E6%90%9C%E7%B4%A2%E8%B8%A9%E5%9D%91/" rel="bookmark" title="Hexo + Theme.Shoka + algolia搜索踩坑">Hexo + Theme.Shoka + algolia搜索踩坑</a></li><li class="active"><a href="/2022/09/26/%E8%A7%A3%E5%86%B3Hexo-Shoka%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90%E6%97%A0%E6%B3%95%E6%92%AD%E6%94%BE%E7%9A%84%E9%97%AE%E9%A2%98/" rel="bookmark" title="解决Hexo+Shoka背景音乐无法播放的问题">解决Hexo+Shoka背景音乐无法播放的问题</a></li><li><a href="/2022/10/21/Hexo-Theme-Shoka-Valine%E8%AF%84%E8%AE%BA%E9%85%8D%E7%BD%AE/" rel="bookmark" title="Hexo + Theme.Shoka + Valine评论配置">Hexo + Theme.Shoka + Valine评论配置</a></li></ul></div><div class="overview panel" data-title="站点概览"><div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="image" itemprop="image" alt="Hito Li" data-src="/images/avatar.jpg"><p class="name" itemprop="name">Hito Li</p><div class="description" itemprop="description">天生我材必有用</div></div><nav class="state"><div class="item posts"><a href="/archives/"><span class="count">38</span> <span class="name">文章</span></a></div><div class="item categories"><a href="/categories/"><span class="count">18</span> <span class="name">分类</span></a></div><div class="item tags"><a href="/tags/"><span class="count">63</span> <span class="name">标签</span></a></div></nav><div class="social"><span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20vdS8xMDYxNDYwNzQ1" title="https://weibo.com/u/1061460745"><i class="ic i-weibo"></i></span> <span class="exturl item douban" data-url="aHR0cHM6Ly93d3cuZG91YmFuLmNvbS9wZW9wbGUvMjU5Mzc2NTY0" title="https://www.douban.com/people/259376564"><i class="ic i-douban"></i></span> <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPTEwNTQ2NzQ2Mw==" title="https://music.163.com/#/user/home?id=105467463"><i class="ic i-cloud-music"></i></span> <a href="/about/me" title="about/me" class="item about"><i class="ic i-address-card"></i></a></div><ul class="menu"><li class="item"><a href="/" rel="section"><i class="ic i-home"></i>首页</a></li><li class="item"><a href="/about/me" rel="section"><i class="ic i-user"></i>关于</a></li><li class="item dropdown"><a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a><ul class="submenu"><li class="item"><a href="/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a></li><li class="item"><a href="/categories/" rel="section"><i class="ic i-th"></i>分类</a></li><li class="item"><a href="/tags/" rel="section"><i class="ic i-tags"></i>标签</a></li></ul></li><li class="item"><span class="exturl" data-url="aHR0cHM6Ly93d3cuZm9yZXZlcmJsb2cuY24vZ28uaHRtbA=="><i class="ic i-paper-plane"></i>虫洞</span></li></ul></div></div></div><ul id="quick"><li class="prev pjax"><a href="/2022/09/23/%E8%A7%A3%E5%86%B3%E5%9F%9F%E5%90%8Dip%E5%8F%98%E5%8A%A8%E5%90%8E%E9%9C%80%E8%A6%81%E9%87%8D%E5%90%AFnginx%E7%9A%84%E9%97%AE%E9%A2%98/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a></li><li class="up"><i class="ic i-arrow-up"></i></li><li class="down"><i class="ic i-arrow-down"></i></li><li class="next pjax"><a href="/2022/09/27/nginx%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1%E9%85%8D%E7%BD%AE/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a></li><li class="percent"></li></ul></div></div><div class="dimmer"></div></div></main><footer id="footer"><div class="inner"><div class="widgets"><div class="rpost pjax"><h2>随机文章</h2><ul><li class="item"><div class="breadcrumb"><a href="/categories/Linux/" title="分类于 Linux">Linux</a> <i class="ic i-angle-right"></i> <a href="/categories/Linux/%E6%9C%8D%E5%8A%A1/" title="分类于 服务">服务</a> <i class="ic i-angle-right"></i> <a href="/categories/Linux/%E6%9C%8D%E5%8A%A1/Nginx/" title="分类于 Nginx">Nginx</a></div><span><a href="/2022/10/06/Nginx%E9%85%8D%E7%BD%AEiframe%E8%AE%BF%E9%97%AE/" title="Nginx配置iframe访问">Nginx配置iframe访问</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" title="分类于 解决问题">解决问题</a></div><span><a href="/2022/12/05/Win10%E5%BD%BB%E5%BA%95%E5%85%B3%E9%97%ADwsappx%E8%BF%9B%E7%A8%8B/" title="Win10彻底关闭wsappx进程">Win10彻底关闭wsappx进程</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Linux/" title="分类于 Linux">Linux</a> <i class="ic i-angle-right"></i> <a href="/categories/Linux/%E6%9C%8D%E5%8A%A1/" title="分类于 服务">服务</a></div><span><a href="/2022/10/18/%E6%90%AD%E5%BB%BAnagios%E7%9B%91%E6%8E%A7/" title="搭建nagios监控">搭建nagios监控</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" title="分类于 极空间">极空间</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" title="分类于 Docker">Docker</a></div><span><a href="/2022/09/16/%E6%9E%81%E7%A9%BA%E9%97%B4chevereto%E5%9B%BE%E5%BA%8Adocker%E7%89%88%E5%AE%89%E8%A3%85/" title="极空间chevereto图床docker版安装">极空间chevereto图床docker版安装</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" title="分类于 极空间">极空间</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" title="分类于 Docker">Docker</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/Hexo/" title="分类于 Hexo">Hexo</a></div><span><a href="/2022/09/17/Hexo-Theme-Shoka-algolia%E6%90%9C%E7%B4%A2%E8%B8%A9%E5%9D%91/" title="Hexo + Theme.Shoka + algolia搜索踩坑">Hexo + Theme.Shoka + algolia搜索踩坑</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" title="分类于 解决问题">解决问题</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/KLineChart/" title="分类于 KLineChart">KLineChart</a></div><span><a href="/2022/11/24/KLineChart%E5%AE%9E%E7%8E%B0%E4%B8%80%E5%B9%85%E5%9B%BE%E4%B8%8A%E7%94%BB%E5%A4%9A%E4%B8%AA%E8%9C%A1%E7%83%9BK%E7%BA%BF/" title="KLineChart实现一幅图上画多个蜡烛K线">KLineChart实现一幅图上画多个蜡烛K线</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Linux/" title="分类于 Linux">Linux</a> <i class="ic i-angle-right"></i> <a href="/categories/Linux/Shell/" title="分类于 Shell">Shell</a></div><span><a href="/2022/11/02/2-dev-null%E5%92%8C-dev-null-2-1%E5%92%8C2-1-dev-null%E7%9A%84%E5%8C%BA%E5%88%AB/" title="2>/dev/null和>/dev/null 2>&1和2>&1>/dev/null的区别">2>/dev/null和>/dev/null 2>&1和2>&1>/dev/null的区别</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E7%94%9F%E6%B4%BB/" title="分类于 生活">生活</a> <i class="ic i-angle-right"></i> <a href="/categories/%E7%94%9F%E6%B4%BB/%E5%BF%83%E5%BE%97%E4%BD%93%E4%BC%9A/" title="分类于 心得体会">心得体会</a></div><span><a href="/2022/09/21/%E8%AE%B0%E4%B8%80%E6%AC%A1netty-socket-io%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%BF%9E%E6%8E%A5%E4%B8%8D%E4%B8%8A%E7%9A%84%E9%97%AE%E9%A2%98/" title="记一次netty-socketio服务端连接不上的问题">记一次netty-socketio服务端连接不上的问题</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2022/10/12/%E4%BD%BF%E7%94%A8picgo%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E5%88%B0chevereto/" title="使用PicGo上传图片到chevereto">使用PicGo上传图片到chevereto</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2022/10/11/svn%E5%BA%93%E8%BD%ACgit%E5%BA%93/" title="svn库转git库">svn库转git库</a></span></li></ul></div><div><h2>最新评论</h2><ul class="leancloud-recent-comment"></ul></div></div><div class="status"><div class="copyright">© 2010 – <span itemprop="copyrightYear">2023</span> <span class="with-love"><i class="ic i-sakura rotate"></i> </span><span class="author" itemprop="copyrightHolder">Hito Li @ ☆∵∴Hito∴∵★</span></div><div class="count"><span class="post-meta-item-icon"><i class="ic i-chart-area"></i> </span><span title="站点总字数">72k 字</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="ic i-coffee"></i> </span><span title="站点阅读时长">1:06</span></div><div class="powered-by">基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span></div></div></div></footer></div><script data-config type="text/javascript">var LOCAL={path:"2022/09/26/解决Hexo-Shoka背景音乐无法播放的问题/",favicon:{show:"（●´3‘●）哎呀呀",hide:"(´Д｀)真糟糕！"},search:{placeholder:"文章搜索",empty:"关于 「 ${query} 」，什么也没搜到",stats:"${time} ms 内找到 ${hits} 条结果"},valine:!0,fancybox:!0,copyright:'复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',ignores:[function(e){return e.includes("#")},function(e){return new RegExp(LOCAL.path+"$").test(e)}]}</script><script src="https://cdn.polyfill.io/v2/polyfill.js"></script><script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script><script src="/js/app.js?v=0.0.0"></script></body></html> |