Template:AudioPlayer: Difference between revisions
From Tuyin Archives
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
<div | <div class="audioplayer" data-audio="{{{1}}}" data-label="{{{2|Audio File}}}"></div> | ||
<script> | <script> | ||
(function(){ | (function(){ | ||
document.addEventListener('DOMContentLoaded', function() { | document.addEventListener('DOMContentLoaded', function() { | ||
var container = document. | var container = document.querySelector('.audioplayer[data-audio]'); | ||
if (!container) return; | if (!container) return; | ||
var fileName = container.getAttribute('data-audio'); | |||
var labelText = container.getAttribute('data-label'); | |||
var oggUrl = 'https://tuyin.online/images/' + fileName; | |||
var mp3Url = oggUrl.replace('.ogg', '.mp3'); | |||
var playerId = 'player_' + Math.random().toString(36).substr(2, 9); | |||
var audioFile = new Audio(); | |||
audioFile.preload = 'metadata'; | |||
if (audioFile.canPlayType('audio/ogg')) { | |||
audioFile.src = oggUrl; | |||
} else if (audioFile.canPlayType('audio/mpeg')) { | |||
audioFile.src = mp3Url; | |||
} else { | |||
container.innerHTML = '<span style="color:red">Your browser cannot play this audio.</span>'; | |||
return; | |||
} | |||
// Create UI | |||
var outer = document.createElement('div'); | var outer = document.createElement('div'); | ||
outer.style.display = 'inline-flex'; | outer.style.display = 'inline-flex'; | ||
| Line 59: | Line 75: | ||
label.style.color = '#8B7355'; | label.style.color = '#8B7355'; | ||
label.style.fontStyle = 'italic'; | label.style.fontStyle = 'italic'; | ||
label.textContent = | label.textContent = labelText; | ||
outer.appendChild(label); | outer.appendChild(label); | ||
Revision as of 20:00, 23 July 2025
