Template:AudioPlayer: Difference between revisions
From Tuyin Archives
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
{{#tag:html| | |||
<div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2|Audio File}}}"></div> | <div class="audioplayer" data-filename="{{{1}}}" data-label="{{{2|Audio File}}}"></div> | ||
| Line 8: | Line 8: | ||
const label = container.dataset.label; | const label = container.dataset.label; | ||
const playerId = 'player_' + Math.random().toString(36).substr(2, 9); | const playerId = 'player_' + Math.random().toString(36).substr(2, 9); | ||
const oggUrl = 'https://tuyin.online/images/' + file; | const oggUrl = 'https://tuyin.online/images/' + file; | ||
const mp3Url = oggUrl.replace('.ogg', '.mp3'); | const mp3Url = oggUrl.replace('.ogg', '.mp3'); | ||
| Line 37: | Line 37: | ||
const btn = document.createElement('button'); | const btn = document.createElement('button'); | ||
btn.innerHTML = '▶️'; | btn.innerHTML = '▶️'; | ||
btn.style.padding = '4px 8px'; | btn.style.padding = '4px 8px'; | ||
| Line 47: | Line 46: | ||
const barWrap = document.createElement('div'); | const barWrap = document.createElement('div'); | ||
barWrap.style.width = '120px'; | barWrap.style.width = '120px'; | ||
barWrap.style.height = '6px'; | barWrap.style.height = '6px'; | ||
| Line 54: | Line 52: | ||
const progress = document.createElement('div'); | const progress = document.createElement('div'); | ||
progress.style.height = '100%'; | progress.style.height = '100%'; | ||
progress.style.backgroundColor = '#8B7355'; | progress.style.backgroundColor = '#8B7355'; | ||
| Line 74: | Line 71: | ||
container.appendChild(wrapper); | container.appendChild(wrapper); | ||
// | // Audio controls | ||
btn.addEventListener('click', function () { | btn.addEventListener('click', function () { | ||
if (audio.paused || audio.ended) { | if (audio.paused || audio.ended) { | ||
| Line 101: | Line 98: | ||
}); | }); | ||
</script> | </script> | ||
}} | |||
Revision as of 20:06, 23 July 2025
