https://sports0808008.github.io/categories/%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/Recent content in 音乐播放器 on 小余同学Hugo -- gohugo.iozh-cn© 2022-2024 Tian Kong. All rights reserved.Tue, 09 Sep 2025 10:00:53 +0800https://sports0808008.github.io/post/%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/Mon, 08 Sep 2025 12:40:28 +0800https://sports0808008.github.io/post/%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/<img src="https://tk-1312331175.cos.ap-chengdu.myqcloud.com/imgs/cover/202509090958756.webp" alt="Featured image of post 音乐播放器" /><h1 id="添加音乐播放器">添加音乐播放器 </h1><h2 id="方法一网易云音乐">方法一：网易云音乐 </h2><p>官网：https://github.com/metowolf/MetingJS</p> <p>直接掉接口：</p> <p><img src="https://sports0808008.github.io/post/%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/index/image-20250908130056052.png" width="1053" height="407" srcset="https://sports0808008.github.io/post/%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/index/image-20250908130056052_hu_91bd23a7760bb0fb.png 480w, https://sports0808008.github.io/post/%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/index/image-20250908130056052_hu_c903e30d7a936fe1.png 1024w" loading="lazy" alt="image-20250908130056052" class="gallery-image" data-flex-grow="258" data-flex-basis="620px" ></p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="c">&lt;!--</span> <span class="err">【</span><span class="nx">custom</span><span class="p">.</span><span class="nx">html</span><span class="err">】</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nx">link</span> <span class="nx">rel</span><span class="o">=</span><span class="s2">&#34;stylesheet&#34;</span> <span class="nx">href</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nx">script</span> <span class="nx">src</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js&#34;</span><span class="o">&gt;&lt;</span><span class="err">/script&gt;</span> </span></span><span class="line"><span class="cl"><span class="c">&lt;!--</span> <span class="nx">require</span> <span class="nx">MetingJS</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nx">script</span> <span class="nx">src</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js&#34;</span><span class="o">&gt;&lt;</span><span class="err">/script&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nx">meting</span><span class="o">-</span><span class="nx">js</span> </span></span><span class="line"><span class="cl"> <span class="nx">server</span><span class="o">=</span><span class="s2">&#34;netease&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;playlist&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span><span class="o">=</span><span class="s2">&#34;117882154&#34;</span><span class="o">&gt;</span> <span class="err">#</span><span class="nx">网易云音乐id</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="err">/meting-js&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>添加在其他页面继续播放</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span><span class="lnt">59 </span><span class="lnt">60 </span><span class="lnt">61 </span><span class="lnt">62 </span><span class="lnt">63 </span><span class="lnt">64 </span><span class="lnt">65 </span><span class="lnt">66 </span><span class="lnt">67 </span><span class="lnt">68 </span><span class="lnt">69 </span><span class="lnt">70 </span><span class="lnt">71 </span><span class="lnt">72 </span><span class="lnt">73 </span><span class="lnt">74 </span><span class="lnt">75 </span><span class="lnt">76 </span><span class="lnt">77 </span><span class="lnt">78 </span><span class="lnt">79 </span><span class="lnt">80 </span><span class="lnt">81 </span><span class="lnt">82 </span><span class="lnt">83 </span><span class="lnt">84 </span><span class="lnt">85 </span><span class="lnt">86 </span><span class="lnt">87 </span><span class="lnt">88 </span><span class="lnt">89 </span><span class="lnt">90 </span><span class="lnt">91 </span><span class="lnt">92 </span><span class="lnt">93 </span><span class="lnt">94 </span><span class="lnt">95 </span><span class="lnt">96 </span><span class="lnt">97 </span><span class="lnt">98 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-gdscript3" data-lang="gdscript3"><span class="line"><span class="cl"><span class="o">&lt;!</span><span class="n">DOCTYPE</span> <span class="n">html</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="n">html</span> <span class="n">lang</span><span class="o">=</span><span class="s2">&#34;zh-CN&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="n">head</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">meta</span> <span class="n">charset</span><span class="o">=</span><span class="s2">&#34;UTF-8&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">meta</span> <span class="n">name</span><span class="o">=</span><span class="s2">&#34;viewport&#34;</span> <span class="n">content</span><span class="o">=</span><span class="s2">&#34;width=device-width, initial-scale=1.0&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="err">音乐播放器</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">link</span> <span class="n">rel</span><span class="o">=</span><span class="s2">&#34;stylesheet&#34;</span> <span class="n">href</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;/</span><span class="n">head</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="n">body</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;!--</span> <span class="n">APlayer</span> <span class="err">容器</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">div</span> <span class="n">id</span><span class="o">=</span><span class="s2">&#34;aplayer&#34;</span><span class="o">&gt;&lt;/</span><span class="n">div</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">&lt;!--</span> <span class="n">MetingJS</span> <span class="err">元素</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">meting</span><span class="o">-</span><span class="n">js</span> </span></span><span class="line"><span class="cl"> <span class="n">server</span><span class="o">=</span><span class="s2">&#34;netease&#34;</span> </span></span><span class="line"><span class="cl"> <span class="n">type</span><span class="o">=</span><span class="s2">&#34;playlist&#34;</span> </span></span><span class="line"><span class="cl"> <span class="n">id</span><span class="o">=</span><span class="s2">&#34;117882154&#34;</span> </span></span><span class="line"><span class="cl"> <span class="n">fixed</span><span class="o">=</span><span class="s2">&#34;true&#34;</span> </span></span><span class="line"><span class="cl"> <span class="n">autoplay</span><span class="o">=</span><span class="s2">&#34;false&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;/</span><span class="n">meting</span><span class="o">-</span><span class="n">js</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">&lt;!--</span> <span class="err">引入</span> <span class="n">APlayer</span> <span class="err">和</span> <span class="n">MetingJS</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">script</span> <span class="n">src</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js&#34;</span><span class="o">&gt;&lt;/</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">script</span> <span class="n">src</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js&#34;</span><span class="o">&gt;&lt;/</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">全局变量用于存储</span><span class="n">APlayer实例</span> </span></span><span class="line"><span class="cl"> <span class="n">let</span> <span class="n">ap</span> <span class="o">=</span> <span class="n">null</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">初始化播放器</span> </span></span><span class="line"><span class="cl"> <span class="n">function</span> <span class="n">initPlayer</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">等待</span><span class="n">MetingJS加载完成</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">checkInterval</span> <span class="o">=</span> <span class="n">setInterval</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playerElement</span> <span class="o">=</span> <span class="n">document</span><span class="o">.</span><span class="n">getElementById</span><span class="p">(</span><span class="s1">&#39;aplayer&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="n">playerElement</span> <span class="o">&amp;&amp;</span> <span class="n">playerElement</span><span class="o">.</span><span class="n">aplayer</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">clearInterval</span><span class="p">(</span><span class="n">checkInterval</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span> <span class="o">=</span> <span class="n">playerElement</span><span class="o">.</span><span class="n">aplayer</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;APlayer实例已获取&#39;</span><span class="p">,</span> <span class="n">ap</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">恢复播放状态</span> </span></span><span class="line"><span class="cl"> <span class="n">restorePlaybackState</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">100</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">恢复播放状态</span> </span></span><span class="line"><span class="cl"> <span class="n">function</span> <span class="n">restorePlaybackState</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playInfo</span> <span class="o">=</span> <span class="n">JSON</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="n">localStorage</span><span class="o">.</span><span class="n">getItem</span><span class="p">(</span><span class="s2">&#34;playInfo&#34;</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="n">playInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;没有找到之前的播放记录&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">等待</span><span class="n">APlayer完全加载</span> </span></span><span class="line"><span class="cl"> <span class="n">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">切换歌曲</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span><span class="o">.</span><span class="n">list</span><span class="o">.</span><span class="k">switch</span><span class="p">(</span><span class="n">playInfo</span><span class="o">.</span><span class="n">index</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="err">`正在恢复第</span><span class="o">$</span><span class="p">{</span><span class="n">playInfo</span><span class="o">.</span><span class="n">index</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="err">首歌曲</span><span class="o">...</span><span class="err">`</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">等待歌曲加载</span> </span></span><span class="line"><span class="cl"> <span class="n">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">调整播放进度</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span><span class="o">.</span><span class="n">seek</span><span class="p">(</span><span class="n">playInfo</span><span class="o">.</span><span class="n">currentTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">恢复播放</span><span class="o">/</span><span class="err">暂停状态</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="n">playInfo</span><span class="o">.</span><span class="n">paused</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span><span class="o">.</span><span class="n">play</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;已恢复播放&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;已恢复播放进度（暂停状态）&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">800</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="n">catch</span> <span class="p">(</span><span class="n">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">error</span><span class="p">(</span><span class="s1">&#39;恢复播放状态时出错:&#39;</span><span class="p">,</span> <span class="n">error</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">500</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">页面销毁前监听</span> </span></span><span class="line"><span class="cl"> <span class="n">window</span><span class="o">.</span><span class="n">onbeforeunload</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="n">ap</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">将播放信息用对象封装，并存入到</span><span class="n">localStorage中</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playInfo</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">index</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">list</span><span class="o">.</span><span class="n">index</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">currentTime</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">audio</span><span class="o">.</span><span class="n">currentTime</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">paused</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">audio</span><span class="o">.</span><span class="n">paused</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="n">localStorage</span><span class="o">.</span><span class="n">setItem</span><span class="p">(</span><span class="s2">&#34;playInfo&#34;</span><span class="p">,</span> <span class="n">JSON</span><span class="o">.</span><span class="n">stringify</span><span class="p">(</span><span class="n">playInfo</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;播放状态已保存&#39;</span><span class="p">,</span> <span class="n">playInfo</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">页面加载后初始化播放器</span> </span></span><span class="line"><span class="cl"> <span class="n">window</span><span class="o">.</span><span class="n">addEventListener</span><span class="p">(</span><span class="s1">&#39;load&#39;</span><span class="p">,</span> <span class="n">initPlayer</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;/</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;/</span><span class="n">body</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;/</span><span class="n">html</span><span class="o">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="方法2原生-酷狗音乐">方法2：原生 酷狗音乐 </h2><p>官网：https://github.com/DIYgod/APlayer</p> <p>中文文档：https://aplayer.js.org/#/zh-Hans/</p> <p>自定义音乐</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span><span class="lnt">20 </span><span class="lnt">21 </span><span class="lnt">22 </span><span class="lnt">23 </span><span class="lnt">24 </span><span class="lnt">25 </span><span class="lnt">26 </span><span class="lnt">27 </span><span class="lnt">28 </span><span class="lnt">29 </span><span class="lnt">30 </span><span class="lnt">31 </span><span class="lnt">32 </span><span class="lnt">33 </span><span class="lnt">34 </span><span class="lnt">35 </span><span class="lnt">36 </span><span class="lnt">37 </span><span class="lnt">38 </span><span class="lnt">39 </span><span class="lnt">40 </span><span class="lnt">41 </span><span class="lnt">42 </span><span class="lnt">43 </span><span class="lnt">44 </span><span class="lnt">45 </span><span class="lnt">46 </span><span class="lnt">47 </span><span class="lnt">48 </span><span class="lnt">49 </span><span class="lnt">50 </span><span class="lnt">51 </span><span class="lnt">52 </span><span class="lnt">53 </span><span class="lnt">54 </span><span class="lnt">55 </span><span class="lnt">56 </span><span class="lnt">57 </span><span class="lnt">58 </span><span class="lnt">59 </span><span class="lnt">60 </span><span class="lnt">61 </span><span class="lnt">62 </span><span class="lnt">63 </span><span class="lnt">64 </span><span class="lnt">65 </span><span class="lnt">66 </span><span class="lnt">67 </span><span class="lnt">68 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-gdscript3" data-lang="gdscript3"><span class="line"><span class="cl"><span class="o">&lt;!--</span> <span class="n">custom</span><span class="o">.</span><span class="n">html</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;!--</span><span class="err">改为了本地引入</span> <span class="o">&lt;</span><span class="n">link</span> <span class="n">rel</span><span class="o">=</span><span class="s2">&#34;stylesheet&#34;</span> <span class="n">href</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css&#34;</span><span class="o">&gt;</span> <span class="o">--&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="n">script</span> <span class="n">src</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js&#34;</span><span class="o">&gt;&lt;/</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="n">div</span> <span class="n">id</span><span class="o">=</span><span class="s2">&#34;aplayer&#34;</span><span class="o">&gt;&lt;/</span><span class="n">div</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">音乐数据预处理</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">musicDir</span> <span class="o">=</span> <span class="s1">&#39;{{ .Site.Home.Permalink }}music/&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">songs</span> <span class="o">=</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;任贤齐-伤心太平洋&#39;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;张韶涵-隐形的翅膀&#39;</span> </span></span><span class="line"><span class="cl"> <span class="p">];</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="n">let</span> <span class="n">audios</span> <span class="o">=</span> <span class="p">[];</span> </span></span><span class="line"><span class="cl"> <span class="n">songs</span><span class="o">.</span><span class="n">forEach</span><span class="p">((</span><span class="n">item</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">songInfo</span> <span class="o">=</span> <span class="n">item</span><span class="o">.</span><span class="n">split</span><span class="p">(</span><span class="s1">&#39;-&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">audios</span><span class="o">.</span><span class="n">push</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="n">name</span><span class="p">:</span> <span class="n">songInfo</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="n">artist</span><span class="p">:</span> <span class="n">songInfo</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="n">url</span><span class="p">:</span> <span class="n">musicDir</span> <span class="o">+</span> <span class="n">item</span> <span class="o">+</span> <span class="s1">&#39;/song.mp3&#39;</span><span class="p">,</span> <span class="o">//</span> <span class="err">歌曲路径</span> </span></span><span class="line"><span class="cl"> <span class="n">cover</span><span class="p">:</span> <span class="n">musicDir</span> <span class="o">+</span> <span class="n">item</span> <span class="o">+</span> <span class="s1">&#39;/cover.jpg&#39;</span><span class="p">,</span> <span class="o">//</span> <span class="err">封面路径</span> </span></span><span class="line"><span class="cl"> <span class="n">lrc</span><span class="p">:</span> <span class="n">musicDir</span> <span class="o">+</span> <span class="n">item</span> <span class="o">+</span> <span class="s1">&#39;/lyric.lrc&#39;</span><span class="p">,</span> <span class="o">//</span> <span class="err">歌词路径</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">ap</span> <span class="o">=</span> <span class="n">new</span> <span class="n">APlayer</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="n">container</span><span class="p">:</span> <span class="n">document</span><span class="o">.</span><span class="n">getElementById</span><span class="p">(</span><span class="s1">&#39;aplayer&#39;</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="n">fixed</span><span class="p">:</span> <span class="bp">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">lrcType</span><span class="p">:</span> <span class="mi">3</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">audio</span><span class="p">:</span> <span class="n">audios</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">/**</span> </span></span><span class="line"><span class="cl"> <span class="o">*</span> <span class="err">页面销毁前监听</span> </span></span><span class="line"><span class="cl"> <span class="o">*/</span> </span></span><span class="line"><span class="cl"> <span class="n">window</span><span class="o">.</span><span class="n">onbeforeunload</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">将播放信息用对象封装，并存入到</span><span class="n">localStorage中</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playInfo</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">index</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">list</span><span class="o">.</span><span class="n">index</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">currentTime</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">audio</span><span class="o">.</span><span class="n">currentTime</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">paused</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">paused</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="n">localStorage</span><span class="o">.</span><span class="n">setItem</span><span class="p">(</span><span class="s2">&#34;playInfo&#34;</span><span class="p">,</span> <span class="n">JSON</span><span class="o">.</span><span class="n">stringify</span><span class="p">(</span><span class="n">playInfo</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">/**</span> </span></span><span class="line"><span class="cl"> <span class="o">*</span> <span class="err">页面加载后监听</span> </span></span><span class="line"><span class="cl"> <span class="o">*/</span> </span></span><span class="line"><span class="cl"> <span class="n">window</span><span class="o">.</span><span class="n">onload</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">从</span><span class="n">localStorage取出播放信息</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playInfo</span> <span class="o">=</span> <span class="n">JSON</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="n">localStorage</span><span class="o">.</span><span class="n">getItem</span><span class="p">(</span><span class="s2">&#34;playInfo&#34;</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="n">playInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">切换歌曲</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span><span class="o">.</span><span class="n">list</span><span class="o">.</span><span class="k">switch</span><span class="p">(</span><span class="n">playInfo</span><span class="o">.</span><span class="n">index</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">等待</span><span class="mi">500</span><span class="n">ms再执行下一步</span><span class="p">(</span><span class="err">切换歌曲需要点时间，不能立马调歌曲进度条</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="n">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">调整时长</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span><span class="o">.</span><span class="n">seek</span><span class="p">(</span><span class="n">playInfo</span><span class="o">.</span><span class="n">currentTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">是否播放</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="n">playInfo</span><span class="o">.</span><span class="n">paused</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span><span class="o">.</span><span class="n">play</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">500</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;/</span><span class="n">script</span><span class="o">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div><p>网易云多ID（多音乐）</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt"> 10 </span><span class="lnt"> 11 </span><span class="lnt"> 12 </span><span class="lnt"> 13 </span><span class="lnt"> 14 </span><span class="lnt"> 15 </span><span class="lnt"> 16 </span><span class="lnt"> 17 </span><span class="lnt"> 18 </span><span class="lnt"> 19 </span><span class="lnt"> 20 </span><span class="lnt"> 21 </span><span class="lnt"> 22 </span><span class="lnt"> 23 </span><span class="lnt"> 24 </span><span class="lnt"> 25 </span><span class="lnt"> 26 </span><span class="lnt"> 27 </span><span class="lnt"> 28 </span><span class="lnt"> 29 </span><span class="lnt"> 30 </span><span class="lnt"> 31 </span><span class="lnt"> 32 </span><span class="lnt"> 33 </span><span class="lnt"> 34 </span><span class="lnt"> 35 </span><span class="lnt"> 36 </span><span class="lnt"> 37 </span><span class="lnt"> 38 </span><span class="lnt"> 39 </span><span class="lnt"> 40 </span><span class="lnt"> 41 </span><span class="lnt"> 42 </span><span class="lnt"> 43 </span><span class="lnt"> 44 </span><span class="lnt"> 45 </span><span class="lnt"> 46 </span><span class="lnt"> 47 </span><span class="lnt"> 48 </span><span class="lnt"> 49 </span><span class="lnt"> 50 </span><span class="lnt"> 51 </span><span class="lnt"> 52 </span><span class="lnt"> 53 </span><span class="lnt"> 54 </span><span class="lnt"> 55 </span><span class="lnt"> 56 </span><span class="lnt"> 57 </span><span class="lnt"> 58 </span><span class="lnt"> 59 </span><span class="lnt"> 60 </span><span class="lnt"> 61 </span><span class="lnt"> 62 </span><span class="lnt"> 63 </span><span class="lnt"> 64 </span><span class="lnt"> 65 </span><span class="lnt"> 66 </span><span class="lnt"> 67 </span><span class="lnt"> 68 </span><span class="lnt"> 69 </span><span class="lnt"> 70 </span><span class="lnt"> 71 </span><span class="lnt"> 72 </span><span class="lnt"> 73 </span><span class="lnt"> 74 </span><span class="lnt"> 75 </span><span class="lnt"> 76 </span><span class="lnt"> 77 </span><span class="lnt"> 78 </span><span class="lnt"> 79 </span><span class="lnt"> 80 </span><span class="lnt"> 81 </span><span class="lnt"> 82 </span><span class="lnt"> 83 </span><span class="lnt"> 84 </span><span class="lnt"> 85 </span><span class="lnt"> 86 </span><span class="lnt"> 87 </span><span class="lnt"> 88 </span><span class="lnt"> 89 </span><span class="lnt"> 90 </span><span class="lnt"> 91 </span><span class="lnt"> 92 </span><span class="lnt"> 93 </span><span class="lnt"> 94 </span><span class="lnt"> 95 </span><span class="lnt"> 96 </span><span class="lnt"> 97 </span><span class="lnt"> 98 </span><span class="lnt"> 99 </span><span class="lnt">100 </span><span class="lnt">101 </span><span class="lnt">102 </span><span class="lnt">103 </span><span class="lnt">104 </span><span class="lnt">105 </span><span class="lnt">106 </span><span class="lnt">107 </span><span class="lnt">108 </span><span class="lnt">109 </span><span class="lnt">110 </span><span class="lnt">111 </span><span class="lnt">112 </span><span class="lnt">113 </span><span class="lnt">114 </span><span class="lnt">115 </span><span class="lnt">116 </span><span class="lnt">117 </span><span class="lnt">118 </span><span class="lnt">119 </span><span class="lnt">120 </span><span class="lnt">121 </span><span class="lnt">122 </span><span class="lnt">123 </span><span class="lnt">124 </span><span class="lnt">125 </span><span class="lnt">126 </span><span class="lnt">127 </span><span class="lnt">128 </span><span class="lnt">129 </span><span class="lnt">130 </span><span class="lnt">131 </span><span class="lnt">132 </span><span class="lnt">133 </span><span class="lnt">134 </span><span class="lnt">135 </span><span class="lnt">136 </span><span class="lnt">137 </span><span class="lnt">138 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-gdscript3" data-lang="gdscript3"><span class="line"><span class="cl"><span class="o">&lt;!</span><span class="n">DOCTYPE</span> <span class="n">html</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="n">html</span> <span class="n">lang</span><span class="o">=</span><span class="s2">&#34;zh-CN&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="n">head</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">meta</span> <span class="n">charset</span><span class="o">=</span><span class="s2">&#34;UTF-8&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">meta</span> <span class="n">name</span><span class="o">=</span><span class="s2">&#34;viewport&#34;</span> <span class="n">content</span><span class="o">=</span><span class="s2">&#34;width=device-width, initial-scale=1.0&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">title</span><span class="o">&gt;</span><span class="err">全局音乐播放器</span><span class="o">&lt;/</span><span class="n">title</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">link</span> <span class="n">rel</span><span class="o">=</span><span class="s2">&#34;stylesheet&#34;</span> <span class="n">href</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">script</span> <span class="n">src</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js&#34;</span><span class="o">&gt;&lt;/</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">script</span> <span class="n">src</span><span class="o">=</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js&#34;</span><span class="o">&gt;&lt;/</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;/</span><span class="n">head</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="n">body</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">div</span> <span class="k">class</span><span class="o">=</span><span class="s2">&#34;buttons&#34;</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">button</span> <span class="k">class</span><span class="o">=</span><span class="s2">&#34;active&#34;</span> <span class="n">data</span><span class="o">-</span><span class="n">id</span><span class="o">=</span><span class="s2">&#34;117882154&#34;</span><span class="o">&gt;</span><span class="err">歌单</span><span class="mi">1</span><span class="o">&lt;/</span><span class="n">button</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">button</span> <span class="n">data</span><span class="o">-</span><span class="n">id</span><span class="o">=</span><span class="s2">&#34;2399935867&#34;</span><span class="o">&gt;</span><span class="err">歌单</span><span class="mi">2</span><span class="o">&lt;/</span><span class="n">button</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">button</span> <span class="n">data</span><span class="o">-</span><span class="n">id</span><span class="o">=</span><span class="s2">&#34;2057627502&#34;</span><span class="o">&gt;</span><span class="err">歌单</span><span class="mi">3</span><span class="o">&lt;/</span><span class="n">button</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;/</span><span class="n">div</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">div</span> <span class="n">id</span><span class="o">=</span><span class="s2">&#34;aplayer&#34;</span><span class="o">&gt;&lt;/</span><span class="n">div</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">&lt;</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">全局变量用于存储</span><span class="n">APlayer实例</span> </span></span><span class="line"><span class="cl"> <span class="n">let</span> <span class="n">ap</span> <span class="o">=</span> <span class="n">null</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="n">let</span> <span class="n">currentPlaylistId</span> <span class="o">=</span> <span class="s1">&#39;117882154&#39;</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">初始化播放器</span> </span></span><span class="line"><span class="cl"> <span class="n">function</span> <span class="n">initPlayer</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">等待</span><span class="n">MetingJS加载完成</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">checkInterval</span> <span class="o">=</span> <span class="n">setInterval</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playerElement</span> <span class="o">=</span> <span class="n">document</span><span class="o">.</span><span class="n">getElementById</span><span class="p">(</span><span class="s1">&#39;aplayer&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="n">playerElement</span> <span class="o">&amp;&amp;</span> <span class="n">playerElement</span><span class="o">.</span><span class="n">aplayer</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">clearInterval</span><span class="p">(</span><span class="n">checkInterval</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span> <span class="o">=</span> <span class="n">playerElement</span><span class="o">.</span><span class="n">aplayer</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;APlayer实例已获取&#39;</span><span class="p">,</span> <span class="n">ap</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">恢复播放状态</span> </span></span><span class="line"><span class="cl"> <span class="n">restorePlaybackState</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">100</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">恢复播放状态</span> </span></span><span class="line"><span class="cl"> <span class="n">function</span> <span class="n">restorePlaybackState</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playInfo</span> <span class="o">=</span> <span class="n">JSON</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="n">localStorage</span><span class="o">.</span><span class="n">getItem</span><span class="p">(</span><span class="s2">&#34;playInfo&#34;</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="n">playInfo</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;没有找到之前的播放记录&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">等待</span><span class="n">APlayer完全加载</span> </span></span><span class="line"><span class="cl"> <span class="n">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">切换歌曲</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span><span class="o">.</span><span class="n">list</span><span class="o">.</span><span class="k">switch</span><span class="p">(</span><span class="n">playInfo</span><span class="o">.</span><span class="n">index</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="err">`正在恢复第</span><span class="o">$</span><span class="p">{</span><span class="n">playInfo</span><span class="o">.</span><span class="n">index</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="err">首歌曲</span><span class="o">...</span><span class="err">`</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">等待歌曲加载</span> </span></span><span class="line"><span class="cl"> <span class="n">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">调整播放进度</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span><span class="o">.</span><span class="n">seek</span><span class="p">(</span><span class="n">playInfo</span><span class="o">.</span><span class="n">currentTime</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">恢复播放</span><span class="o">/</span><span class="err">暂停状态</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="n">playInfo</span><span class="o">.</span><span class="n">paused</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">ap</span><span class="o">.</span><span class="n">play</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;已恢复播放&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;已恢复播放进度（暂停状态）&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">800</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="n">catch</span> <span class="p">(</span><span class="n">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">error</span><span class="p">(</span><span class="s1">&#39;恢复播放状态时出错:&#39;</span><span class="p">,</span> <span class="n">error</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="mi">500</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">页面销毁前监听</span> </span></span><span class="line"><span class="cl"> <span class="n">window</span><span class="o">.</span><span class="n">onbeforeunload</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="n">ap</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">将播放信息用对象封装，并存入到</span><span class="n">localStorage中</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playInfo</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">index</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">list</span><span class="o">.</span><span class="n">index</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">currentTime</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">audio</span><span class="o">.</span><span class="n">currentTime</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">paused</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">audio</span><span class="o">.</span><span class="n">paused</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="n">localStorage</span><span class="o">.</span><span class="n">setItem</span><span class="p">(</span><span class="s2">&#34;playInfo&#34;</span><span class="p">,</span> <span class="n">JSON</span><span class="o">.</span><span class="n">stringify</span><span class="p">(</span><span class="n">playInfo</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> <span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">&#39;播放状态已保存&#39;</span><span class="p">,</span> <span class="n">playInfo</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">创建</span><span class="n">Meting元素</span> </span></span><span class="line"><span class="cl"> <span class="n">function</span> <span class="n">createMetingElement</span><span class="p">(</span><span class="n">playlistId</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">existingMeting</span> <span class="o">=</span> <span class="n">document</span><span class="o">.</span><span class="n">querySelector</span><span class="p">(</span><span class="s1">&#39;meting-js&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="n">existingMeting</span><span class="p">)</span> <span class="n">existingMeting</span><span class="o">.</span><span class="n">remove</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">metingElement</span> <span class="o">=</span> <span class="n">document</span><span class="o">.</span><span class="n">createElement</span><span class="p">(</span><span class="s1">&#39;meting-js&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">metingElement</span><span class="o">.</span><span class="n">setAttribute</span><span class="p">(</span><span class="s1">&#39;server&#39;</span><span class="p">,</span> <span class="s1">&#39;netease&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">metingElement</span><span class="o">.</span><span class="n">setAttribute</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">,</span> <span class="s1">&#39;playlist&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">metingElement</span><span class="o">.</span><span class="n">setAttribute</span><span class="p">(</span><span class="s1">&#39;id&#39;</span><span class="p">,</span> <span class="n">playlistId</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">metingElement</span><span class="o">.</span><span class="n">setAttribute</span><span class="p">(</span><span class="s1">&#39;fixed&#39;</span><span class="p">,</span> <span class="s1">&#39;true&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">metingElement</span><span class="o">.</span><span class="n">setAttribute</span><span class="p">(</span><span class="s1">&#39;autoplay&#39;</span><span class="p">,</span> <span class="s1">&#39;false&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="n">document</span><span class="o">.</span><span class="n">getElementById</span><span class="p">(</span><span class="s1">&#39;aplayer&#39;</span><span class="p">)</span><span class="o">.</span><span class="n">appendChild</span><span class="p">(</span><span class="n">metingElement</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">重新初始化播放器</span> </span></span><span class="line"><span class="cl"> <span class="n">initPlayer</span><span class="p">();</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">按钮点击事件</span> </span></span><span class="line"><span class="cl"> <span class="n">document</span><span class="o">.</span><span class="n">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">)</span><span class="o">.</span><span class="n">forEach</span><span class="p">(</span><span class="n">button</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">button</span><span class="o">.</span><span class="n">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="n">function</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playlistId</span> <span class="o">=</span> <span class="n">this</span><span class="o">.</span><span class="n">getAttribute</span><span class="p">(</span><span class="s1">&#39;data-id&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">更新按钮状态</span> </span></span><span class="line"><span class="cl"> <span class="n">document</span><span class="o">.</span><span class="n">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;button&#39;</span><span class="p">)</span><span class="o">.</span><span class="n">forEach</span><span class="p">(</span><span class="n">btn</span> <span class="o">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">btn</span><span class="o">.</span><span class="n">classList</span><span class="o">.</span><span class="n">remove</span><span class="p">(</span><span class="s1">&#39;active&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="n">this</span><span class="o">.</span><span class="n">classList</span><span class="o">.</span><span class="n">add</span><span class="p">(</span><span class="s1">&#39;active&#39;</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">保存当前播放状态</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="n">ap</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">const</span> <span class="n">playInfo</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="n">index</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">list</span><span class="o">.</span><span class="n">index</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">currentTime</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">audio</span><span class="o">.</span><span class="n">currentTime</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="n">paused</span><span class="p">:</span> <span class="n">ap</span><span class="o">.</span><span class="n">audio</span><span class="o">.</span><span class="n">paused</span> </span></span><span class="line"><span class="cl"> <span class="p">};</span> </span></span><span class="line"><span class="cl"> <span class="n">localStorage</span><span class="o">.</span><span class="n">setItem</span><span class="p">(</span><span class="s2">&#34;playInfo&#34;</span><span class="p">,</span> <span class="n">JSON</span><span class="o">.</span><span class="n">stringify</span><span class="p">(</span><span class="n">playInfo</span><span class="p">));</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">创建新的</span><span class="n">Meting元素</span> </span></span><span class="line"><span class="cl"> <span class="n">createMetingElement</span><span class="p">(</span><span class="n">playlistId</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="n">currentPlaylistId</span> <span class="o">=</span> <span class="n">playlistId</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> <span class="p">});</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="o">//</span> <span class="err">初始创建</span><span class="n">Meting元素</span> </span></span><span class="line"><span class="cl"> <span class="n">createMetingElement</span><span class="p">(</span><span class="n">currentPlaylistId</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="o">&lt;/</span><span class="n">script</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;/</span><span class="n">body</span><span class="o">&gt;</span> </span></span><span class="line"><span class="cl"><span class="o">&lt;/</span><span class="n">html</span><span class="o">&gt;</span> </span></span></code></pre></td></tr></table> </div> </div>