微件:音频

<button class="ec-audio-btn" type="button" aria-label="播放音效"></button><audio preload="none" src=""></audio> <style> .ec-audio{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;line-height:1.5} .ec-audio-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid #c9d2de;border-radius:50%;background:#fff;cursor:pointer;font-size:14px;line-height:1;color:inherit;transition:background .15s,border-color .15s,box-shadow .15s,transform .08s} .ec-audio-btn:hover{background:#eef3fd;border-color:#2f6fed} .ec-audio-btn:active{transform:scale(.92)} .ec-audio-btn:focus-visible{outline:2px solid #2f6fed;outline-offset:2px} .ec-audio-ico{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:#48525f} .ec-audio.is-playing .ec-audio-ico{color:#fff} .ec-audio.is-playing .ec-audio-btn{background:#2f6fed;border-color:#2f6fed;box-shadow:0 0 0 3px rgba(47,111,237,.18)} .ec-audio.is-error .ec-audio-btn{border-color:#d9534f;background:#fdf1f0} .ec-audio-name{font-size:13.5px;color:#2f3742} </style> <script> (function () {

 if (window.__ecAudioReady) return;
 window.__ecAudioReady = true;

 function closest(el, sel) {
   while (el && el.nodeType === 1) {
     if (el.matches && el.matches(sel)) return el;
     el = el.parentNode;
   }
   return null;
 }
 function stop(box) {
   var a = box.querySelector('audio');
   if (a) { try { a.pause(); a.currentTime = 0; } catch (e) {} }
   box.classList.remove('is-playing');
 }

 document.addEventListener('click', function (e) {
   var btn = closest(e.target, '.ec-audio-btn');
   if (!btn) return;
   var box = closest(btn, '.ec-audio');
   if (!box) return;
   var audio = box.querySelector('audio');
   if (!audio) return;

   if (box.classList.contains('is-playing')) { stop(box); return; }

   var playing = document.querySelectorAll('.ec-audio.is-playing');
   for (var i = 0; i < playing.length; i++) stop(playing[i]);

   box.classList.remove('is-error');
   try { audio.currentTime = 0; } catch (err) {}
   box.classList.add('is-playing');

   var p = audio.play();
   if (p && p.catch) {
     p.catch(function (err) {
       box.classList.remove('is-playing');
       box.classList.add('is-error');
       btn.title = '播放失败：' + (err && err.name ? err.name : '未知错误');
     });
   }
 });

 document.addEventListener('ended', function (e) {
   var box = closest(e.target, '.ec-audio');
   if (box) box.classList.remove('is-playing');
 }, true);

 document.addEventListener('error', function (e) {
   var box = closest(e.target, '.ec-audio');
   if (box) {
     box.classList.remove('is-playing');
     box.classList.add('is-error');
     var btn = box.querySelector('.ec-audio-btn');
     if (btn) btn.title = '音频加载失败：文件不存在或浏览器不支持该格式';
   }
 }, true);

})(); </script>