Template:AudioPlayer: Difference between revisions
From Tuyin Archives
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
< | <html> | ||
<script> | |||
var audioFile = new Audio(); | |||
var isPlayingFile = false; | |||
var playerId = 'player_' + Math.random().toString(36).substr(2, 9); | |||
// Try multiple formats | |||
audioFile.innerHTML = '<source src="https://tuyin.online/images/{{{1}}}" type="audio/ogg"><source src="https://tuyin.online/images/{{{1|replace:.ogg,.mp3}}}" type="audio/mpeg">'; | |||
function togglePlayFile() { | |||
var button = document.getElementById(playerId + '_btn'); | |||
if (isPlayingFile) { | |||
audioFile.pause(); | |||
button.innerHTML = '▶️'; | |||
isPlayingFile = false; | |||
} else { | |||
audioFile.play().then(function() { | |||
button.innerHTML = '⏸️'; | |||
isPlayingFile = true; | |||
}).catch(function(error) { | |||
console.log('Play failed:', error); | |||
alert('Could not play audio: ' + error.message); | |||
}); | |||
} | |||
} | |||
audioFile.addEventListener('timeupdate', function() { | |||
var progress = document.getElementById(playerId + '_progress'); | |||
if (progress) { | |||
var percentage = (audioFile.currentTime / audioFile.duration) * 100; | |||
progress.style.width = percentage + '%'; | |||
} | |||
}); | |||
audioFile.addEventListener('ended', function() { | |||
var button = document.getElementById(playerId + '_btn'); | |||
if (button) { | |||
button.innerHTML = '▶️'; | |||
isPlayingFile = false; | |||
document.getElementById(playerId + '_progress').style.width = '0%'; | |||
} | |||
}); | |||
</script> | |||
<div style="display: inline-flex; align-items: center; gap: 12px;"> | <div style="display: inline-flex; align-items: center; gap: 12px;"> | ||
<div style="border: 1px solid #8B7355; padding: 8px; display: inline-block; border-radius: 4px; background-color: #F5F0E8; width: 200px;"> | |||
<button onclick="togglePlayFile()" style="padding: 4px 8px; margin-right: 8px; font-size: 12px; border: 1px solid #8B7355; background: #D4C4A8; color: #5D4E37;">▶️</button> | |||
<div style="display: inline-block; width: 120px; height: 6px; background-color: #D4C4A8; border-radius: 3px; vertical-align: middle;"> | |||
<div style="height: 100%; background-color: #8B7355; border-radius: 3px; width: 0%; transition: width 0.1s;"></div> | |||
</div> | |||
</div> | </div> | ||
<span style="color: #8B7355; font-style: italic;">{{{2|Audio File}}}</span> | |||
</div> | </div> | ||
</ | |||
<script> | |||
document.addEventListener('DOMContentLoaded', function() { | |||
var buttons = document.querySelectorAll('button[onclick="togglePlayFile()"]'); | |||
var lastButton = buttons[buttons.length - 1]; | |||
lastButton.id = playerId + '_btn'; | |||
var progressBars = document.querySelectorAll('div[style*="width: 0%"]'); | |||
var lastProgress = progressBars[progressBars.length - 1]; | |||
lastProgress.id = playerId + '_progress'; | |||
}); | |||
</script> | |||
</html> | |||
Revision as of 19:48, 23 July 2025
