跳转到内容

MediaWiki:Gadget-AudioText.js:修订间差异

来自电棍ottowiki
第1行: 第1行:
// MediaWiki:Gadget-AudioText.js
// MediaWiki:Gadget-AudioText.js
(function() {
(function() {
     mw.hook('wikipage.content').add(function() {
     // 预加载音频URL缓存
        alert("🎉 JS脚本已加载!"); // 1. 脚本加载确认
    const audioUrlCache = new Map();


         document.querySelectorAll('.audio-trigger').forEach(element => {
    // 统一处理播放逻辑
             element.addEventListener('click', function() {
    function handlePlay(element) {
                 alert("🖱️ 点击事件已触发!"); // 2. 点击事件确认
        const originalText = element.textContent;
       
        // 显示加载状态
         element.textContent = "加载中...";
        element.style.color = "#999";
 
        const audioFile = element.dataset.audioFile;
       
        // 优先使用缓存
        if (audioUrlCache.has(audioFile)) {
            playAudio(audioUrlCache.get(audioFile), element, originalText);
            return;
        }
 
        // 通过API获取音频真实URL
        const apiUrl = mw.util.wikiScript('api') + '?action=query&titles=' +
             encodeURIComponent(audioFile) + '&prop=imageinfo&iiprop=url&format=json';
 
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                 const pages = data.query.pages;
                const pageId = Object.keys(pages)[0];
                const audioUrl = pages[pageId].imageinfo[0]?.url;
               
                if (!audioUrl) {
                    throw new Error("未找到音频文件");
                }
                  
                  
                 const audioFile = element.dataset.audioFile;
                 // 缓存URL并播放
                 alert("📁 音频文件名: " + audioFile); // 3. 显示模板参数
                audioUrlCache.set(audioFile, audioUrl);
                playAudio(audioUrl, element, originalText);
            })
            .catch(() => {
                // 失败状态提示
                element.textContent = "加载失败,点击重试";
                 element.style.color = "red";
            });
    }


                // 构造API请求URL
    function playAudio(url, element, originalText) {
                const apiUrl = mw.util.wikiScript('api') + '?action=query&titles=' +
        const audio = new Audio(url);
                    encodeURIComponent(audioFile) + '&prop=imageinfo&iiprop=url&format=json';
       
                alert("🔗 即将请求API: \n" + apiUrl); // 4. 显示API地址
        audio.play().then(() => {
            // 播放成功恢复状态
            element.textContent = originalText;
            element.style.color = "blue";
        }).catch(() => {
            // 静默失败,不干扰用户
            element.textContent = originalText;
            element.style.color = "blue";
        });
    }


                // 发送API请求
    // 事件绑定(支持移动端)
                fetch(apiUrl)
    function initAudioTriggers() {
                    .then(response => {
        document.querySelectorAll('.audio-trigger').forEach(element => {
                        alert("📡 API响应状态: " + response.status); // 5. HTTP状态码
            if (element._audioBound) return;
                        return response.json();
            element._audioBound = true;
                    })
                    .then(data => {
                        alert("📦 API返回原始数据: \n" + JSON.stringify(data)); // 6. 原始API数据
                       
                        const pages = data.query.pages;
                        const pageId = Object.keys(pages)[0];
                        const audioUrl = pages[pageId].imageinfo[0].url;
                        alert("🎵 解析出的音频URL: \n" + audioUrl); // 7. 最终音频地址


                        // 尝试播放
            const handler = (event) => {
                        const audio = new Audio(audioUrl);
                event.preventDefault();
                        audio.play()
                handlePlay(element);
                            .then(() => alert("✅ 播放成功!"))
            };
                            .catch(e => alert("❌ 播放失败: " + e.message)); // 8. 播放结果
 
                    })
            element.addEventListener('touchstart', handler, { passive: false });
                    .catch(error => {
             element.addEventListener('click', handler);
                        alert("💥 发生严重错误: " + error.message); // 9. 全局错误捕获
                    });
             });
         });
         });
     });
     }
 
    // 初始化
    mw.hook('wikipage.content').add(initAudioTriggers);
    mw.loader.using('mediawiki.api').then(initAudioTriggers);
})();
})();

2025年5月24日 (六) 23:19的版本

// MediaWiki:Gadget-AudioText.js
(function() {
    // 预加载音频URL缓存
    const audioUrlCache = new Map();

    // 统一处理播放逻辑
    function handlePlay(element) {
        const originalText = element.textContent;
        
        // 显示加载状态
        element.textContent = "加载中...";
        element.style.color = "#999";

        const audioFile = element.dataset.audioFile;
        
        // 优先使用缓存
        if (audioUrlCache.has(audioFile)) {
            playAudio(audioUrlCache.get(audioFile), element, originalText);
            return;
        }

        // 通过API获取音频真实URL
        const apiUrl = mw.util.wikiScript('api') + '?action=query&titles=' + 
            encodeURIComponent(audioFile) + '&prop=imageinfo&iiprop=url&format=json';

        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                const pages = data.query.pages;
                const pageId = Object.keys(pages)[0];
                const audioUrl = pages[pageId].imageinfo[0]?.url;
                
                if (!audioUrl) {
                    throw new Error("未找到音频文件");
                }
                
                // 缓存URL并播放
                audioUrlCache.set(audioFile, audioUrl);
                playAudio(audioUrl, element, originalText);
            })
            .catch(() => {
                // 失败状态提示
                element.textContent = "加载失败,点击重试";
                element.style.color = "red";
            });
    }

    function playAudio(url, element, originalText) {
        const audio = new Audio(url);
        
        audio.play().then(() => {
            // 播放成功恢复状态
            element.textContent = originalText;
            element.style.color = "blue";
        }).catch(() => {
            // 静默失败,不干扰用户
            element.textContent = originalText;
            element.style.color = "blue";
        });
    }

    // 事件绑定(支持移动端)
    function initAudioTriggers() {
        document.querySelectorAll('.audio-trigger').forEach(element => {
            if (element._audioBound) return;
            element._audioBound = true;

            const handler = (event) => {
                event.preventDefault();
                handlePlay(element);
            };

            element.addEventListener('touchstart', handler, { passive: false });
            element.addEventListener('click', handler);
        });
    }

    // 初始化
    mw.hook('wikipage.content').add(initAudioTriggers);
    mw.loader.using('mediawiki.api').then(initAudioTriggers);
})();