MediaWiki:Gadget-AudioText.js:修订间差异
外观
![]() OctoberSama(留言 | 贡献) 小 |
![]() OctoberSama(留言 | 贡献) 小 |
||
第1行: | 第1行: | ||
// MediaWiki:Gadget-AudioText.js | // MediaWiki:Gadget-AudioText.js | ||
(function() { | (function() { | ||
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(error => { | |||
element.textContent = "加载失败,点击重试"; | |||
element.style.color = "red"; | |||
console.error("音频加载失败:", error); | |||
}); | |||
} | |||
function playAudio(url, element, originalText) { | |||
const audio = new Audio(url); | |||
// 立即尝试播放(用户点击已授权) | |||
audio.play().then(() => { | |||
// 播放成功恢复状态 | |||
element.textContent = originalText; | |||
element.style.color = "blue"; | |||
}).catch(error => { | |||
// 播放失败提示 | |||
element.textContent = "播放失败,点击重试"; | |||
element.style.color = "red"; | |||
console.error("播放失败:", error); | |||
}); | |||
} | |||
// 绑定事件(同时支持移动端touch和桌面端click) | |||
function initAudioTriggers() { | |||
document.querySelectorAll('.audio-trigger').forEach(element => { | document.querySelectorAll('.audio-trigger').forEach(element => { | ||
element. | // 防止重复绑定 | ||
if (element._audioBound) return; | |||
element._audioBound = true; | |||
// 统一事件处理器 | |||
const handler = (event) => { | |||
event.preventDefault(); // 阻止移动端默认行为(如滚动) | |||
handlePlay(element); | |||
}; | }; | ||
// 同时绑定touch和click | |||
element.addEventListener('touchstart', handler, { passive: false }); | |||
element.addEventListener('click', handler); | |||
}); | }); | ||
} | } | ||
mw.hook('wikipage.content').add( | // 初始化:页面加载时运行 + 动态内容加载后运行 | ||
mw.loader.using('mediawiki.api').then( | mw.hook('wikipage.content').add(initAudioTriggers); | ||
mw.loader.using('mediawiki.api').then(initAudioTriggers); | |||
})(); | })(); |
2025年5月24日 (六) 21:39的版本
// 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(error => { element.textContent = "加载失败,点击重试"; element.style.color = "red"; console.error("音频加载失败:", error); }); } function playAudio(url, element, originalText) { const audio = new Audio(url); // 立即尝试播放(用户点击已授权) audio.play().then(() => { // 播放成功恢复状态 element.textContent = originalText; element.style.color = "blue"; }).catch(error => { // 播放失败提示 element.textContent = "播放失败,点击重试"; element.style.color = "red"; console.error("播放失败:", error); }); } // 绑定事件(同时支持移动端touch和桌面端click) function initAudioTriggers() { document.querySelectorAll('.audio-trigger').forEach(element => { // 防止重复绑定 if (element._audioBound) return; element._audioBound = true; // 统一事件处理器 const handler = (event) => { event.preventDefault(); // 阻止移动端默认行为(如滚动) handlePlay(element); }; // 同时绑定touch和click element.addEventListener('touchstart', handler, { passive: false }); element.addEventListener('click', handler); }); } // 初始化:页面加载时运行 + 动态内容加载后运行 mw.hook('wikipage.content').add(initAudioTriggers); mw.loader.using('mediawiki.api').then(initAudioTriggers); })();