digital store with mp3 files:
- html5 'audio' tag is used, with 'controls'; works superb
- since there are many audios, user should be visually reminded which one is playing - i want border around audio that is playing (active);
it is django project (python); with bootstrap 4
- audio tag does not support styling, but it is possible to render orange border using: 'style="border-color:crimson"' in audio tag. ok, crimson. lol.
html5 audio tag has 'play' event, it should be triggered when audio is played, by clicking 'play' on player:
- play Fires when the audio/video has been started or is no longer paused
html:
<div id="sample-container"
class="col-auto my-auto">
<!-- sample player -->
<!-- style="border-color:crimson" -->
<!-- onplay="player_border();" -->
<audio id="sample-player"
controls
loop
play="player_border();"
class="btn btn-sm my-auto ">
<source src="{{ instance.audio.url }}"
type="audio/mpeg">
</audio>
</div>
audio tag also has 'paused' property:
- paused Returns whether the audio/video is paused or not
script:
<!-- scripts -->
<script type="text/javascript">
function player_border()
{
var player = document.getElementById('sample-player'); // <audio>
var playContainer = document.getElementById('sample-container'); // <div>
playContainer.style.borderColor = 'orange'; // ko
player.style.borderColor = 'green'; // ko
var isPlaying = (!player.paused);
//document.getElementById("play_sample").play = function()
// elem = document.getElementById('#play_sample')
// var elem = document.getElementById('play_sample').innerHTML; # for inner text
// var player = document.getElementById('#play_sample');
// var play_container = document.getElementById('#play_container');
// play_container.style.color = 'orange;'
// play_container.style = 'border-color:orange;'
// play_container.style.borderColor = 'color:orange;'
// player.style.borderColor = 'color:green;'
// if (elem.audio.play)
// if (!elem.paused)
// if (!elem.audio.paused)
// if (!player.paused)
// if (player.play)
if (isPlaying)
{
playContainer.style = 'border-color:green';
player.style.borderColor = 'orange';
// player.style = 'borderColor:orange';
// play_container.style = 'border-color:border-warning'
// player.setAttribute('style', 'borderColor:orange;')
// play_container.setAttribute('style', 'color:orange; border: 1px solid blue;')
// elem.style = 'border:orange;'
// elem.setAttribute('style', 'border: 1px solid orange;'
// elem.style = 'border:border-warning'
};
}
</script>
say "i expect" when audio tag control (play audio) is clicked, and audio (mp3) is playing, there should be colored border around audio player, since it is possible to render colored border around audio player;
sad reality, which does not necessary implies a lack of intelligence (lol), is that i am solving this for 8 hours straight; obviously a newbie with js and html5 audio tag.
thx for help,
bow,
s love nia