JS历理 点击播放mp3音频的功能 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>点击播放mp3音频的功能</title>
    <link rel="stylesheet" href="/_/_js/katex/katex.min.css">
    <link rel="stylesheet" href="/_/_js/layui/css/layui.css">
    <link rel="stylesheet" href="/_/_css/base.css">
</head>
<body>
<div>
    啊ā<a href='##ā' data-audio='/_/vod/pinyin/A/a/ā.mp3' class='layui-icon'>&#xe645;</a>
    巴bā<a href='##bā' data-audio='/_/vod/pinyin/B/ba/bā.mp3' class='layui-icon'>&#xe645;</a>
    <br>
    <a href='##ā' data-audio='/_/vod/pinyin/A/a/ā.mp3' class='layui-icon'>啊ā</a>
    <a href='##bā' data-audio='/_/vod/pinyin/B/ba/bā.mp3' class='layui-icon'>巴bā</a>

</div>
<script src="/_/_js/layui/layui.js"></script>
<script defer src="/_/_js/katex/katex.min.js"></script>
<script defer src="/_/_js/katex/contrib/auto-render.min.js"></script>
<script src="/_/_js/base.js"></script>
</body>
</html>
<script>
    layui.use(['element', 'layer'], function() {
        const element = layui.element;
        const layer = layui.layer;

        // 音频缓存池
        const audioCache = new Map();

        // 安全播放音频函数
        function playAudioSafely(audioPath) {
            // 从缓存中获取或创建新的Audio对象
            let audio = audioCache.get(audioPath);
            if (!audio) {
                audio = new Audio(audioPath);
                audio.preload = 'auto';
                audioCache.set(audioPath, audio);
            }

            // 尝试播放音频
            return audio.play().catch(error => {
                console.error('播放失败:', error);
                layer.msg('音频播放失败，请检查文件路径或浏览器设置', { icon: 2 });
                throw error;
            });
        }

        // 监听所有带有 data-audio 属性的 a 标签的点击事件
        document.querySelectorAll('a[data-audio]').forEach(aTag => {
            aTag.addEventListener('click', function(e) {
                e.preventDefault(); // 阻止链接默认行为
                const audioPath = this.dataset.audio;
                playAudioSafely(audioPath);
            });
        });
    });
</script>

效果图：

posted @ 2025-06-02 18:45  onestopweb  阅读(27)  评论(0)    收藏  举报