https://new.pvzhe.wiki/w/%E5%BE%AE%E4%BB%B6:AudioPlayer?action=history&feed=atom 2026-06-19T19:40:05Z 本wiki上该页面的版本历史 MediaWiki 1.43.6 https://new.pvzhe.wiki/index.php?title=%E5%BE%AE%E4%BB%B6:AudioPlayer&diff=5098&oldid=prev 2026-06-16T12:39:18Z

<p>创建页面，内容为“&lt;includeonly&gt; &lt;style&gt; .audio-player { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: #f5f5f5; border-radius: 20px; border: 1px solid #e0e0e0; cursor: pointer; user-select: none; transition: all 0.2s; } .audio-player:hover { background: #e8f5e9; border-color: #4CAF50; } .audio-player.playing { background: #c8e6c9; border-color: #4CAF50; } .audio-player-icon { font-si…”</p> <p><b>新页面</b></p><div>&lt;includeonly&gt;<br /> &lt;style&gt;<br /> .audio-player {<br /> display: inline-flex;<br /> align-items: center;<br /> gap: 8px;<br /> padding: 6px 14px;<br /> background: #f5f5f5;<br /> border-radius: 20px;<br /> border: 1px solid #e0e0e0;<br /> cursor: pointer;<br /> user-select: none;<br /> transition: all 0.2s;<br /> }<br /> .audio-player:hover {<br /> background: #e8f5e9;<br /> border-color: #4CAF50;<br /> }<br /> .audio-player.playing {<br /> background: #c8e6c9;<br /> border-color: #4CAF50;<br /> }<br /> .audio-player-icon {<br /> font-size: 18px;<br /> line-height: 1;<br /> }<br /> .audio-player-text {<br /> font-size: 13px;<br /> color: #555;<br /> }<br /> &lt;/style&gt;<br /> <br /> &lt;span class=&quot;audio-player&quot; onclick=&quot;toggleAudio(&#039;&lt;!--{$id|escape:&#039;html&#039;}--&gt;&#039;, &#039;&lt;!--{$file|escape:&#039;html&#039;}--&gt;&#039;, this)&quot;&gt;<br /> &lt;span class=&quot;audio-player-icon&quot; id=&quot;audio-icon-&lt;!--{$id|escape:&#039;html&#039;}--&gt;&quot;&gt;▶️&lt;/span&gt;<br /> &lt;span class=&quot;audio-player-text&quot; id=&quot;audio-text-&lt;!--{$id|escape:&#039;html&#039;}--&gt;&quot;&gt;&lt;!--{$label|default:&#039;播放音效&#039;}--&gt;&lt;/span&gt;<br /> &lt;/span&gt;<br /> <br /> &lt;script&gt;<br /> window.audioPlayers = window.audioPlayers || {};<br /> window.currentAudio = window.currentAudio || null;<br /> window.currentBtn = window.currentBtn || null;<br /> <br /> window.toggleAudio = function(id, file, btn) {<br /> var icon = document.getElementById(&#039;audio-icon-&#039; + id);<br /> var text = document.getElementById(&#039;audio-text-&#039; + id);<br /> <br /> // 如果正在播放同一个，暂停<br /> if (window.audioPlayers[id] &amp;&amp; !window.audioPlayers[id].paused) {<br /> window.audioPlayers[id].pause();<br /> icon.textContent = &#039;▶️&#039;;<br /> btn.classList.remove(&#039;playing&#039;);<br /> window.currentAudio = null;<br /> window.currentBtn = null;<br /> return;<br /> }<br /> <br /> // 停止之前的播放<br /> if (window.currentAudio &amp;&amp; window.currentAudio !== window.audioPlayers[id]) {<br /> window.currentAudio.pause();<br /> if (window.currentBtn) {<br /> window.currentBtn.classList.remove(&#039;playing&#039;);<br /> var prevIcon = window.currentBtn.querySelector(&#039;.audio-player-icon&#039;);<br /> if (prevIcon) prevIcon.textContent = &#039;▶️&#039;;<br /> }<br /> }<br /> <br /> // 创建或复用 Audio 对象<br /> if (!window.audioPlayers[id]) {<br /> window.audioPlayers[id] = new Audio(file);<br /> }<br /> <br /> var audio = window.audioPlayers[id];<br /> audio.play().then(function() {<br /> icon.textContent = &#039;⏸&#039;;<br /> btn.classList.add(&#039;playing&#039;);<br /> window.currentAudio = audio;<br /> window.currentBtn = btn;<br /> <br /> audio.onended = function() {<br /> icon.textContent = &#039;▶️&#039;;<br /> btn.classList.remove(&#039;playing&#039;);<br /> window.currentAudio = null;<br /> window.currentBtn = null;<br /> };<br /> }).catch(function() {<br /> icon.textContent = &#039;❌&#039;;<br /> text.textContent = &#039;加载失败&#039;;<br /> });<br /> };<br /> &lt;/script&gt;<br /> &lt;/includeonly&gt;</div>

愤怒的郎朗