html5 <audio>在播放时用javascript设置边框颜色
html5 <audio>在播放时用javascript设置边框颜色
提问于 2019-03-23 02:50:12
带有mp3文件的数字存储：
- 使用html5‘音频’标签，带有‘控件’；工作非常出色
- 因为有很多的音频，用户应该被视觉提醒谁在播放-我想边框周围的音频正在播放(活动)；
它是django项目(python)；带有引导程序4
- 音频标签不支持样式化，但是可以在音频标签中使用：‘style=’边框颜色:深红‘’呈现橙色边框。好吧，深红色。LOL。
html5音频标签有“play”事件，在播放音频时应该触发它，单击player上的“play”：
- 当音频/视频已启动或不再暂停时，播放火
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>音频标签还具有“暂停”属性：
- 不管音频/视频是否暂停，暂停都会返回。
剧本：
<!-- 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>当点击音频标签控制(播放音频)和播放音频(mp3)时，应该在音频播放器周围设置彩色边框，因为可以在音频播放器周围呈现彩色边框；
可悲的现实，这并不意味着缺乏智慧(lol)，是我解决了8个小时，直接；显然，一个新手与js和html5音频标签。
寻求帮助，
鞠躬，
她的爱情之夜
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-23 02:57:06
HTML中的事件侦听器以on前缀开头
您的代码是正确的，但是，您需要使用属性onplay而不是play
<audio onplay="callYourFunc()"></audio>另一注：
您可能需要通过监听onpause="callYourFunc()"暂停事件，以便在<audio>元素暂停时删除样式。
Stack Overflow用户
发布于 2019-03-23 03:48:30
此更新有效，但不正确。我可能缺少一个函数循环，或者什么的，代码只对页面上的第一个元素起作用。
<div id="sample-container"
class="col-auto my-auto">
<!-- sample player -->
<!-- style="border-color:crimson" -->
<!-- play="player_border();" -->
<!-- style="background:crimson; border-radius:27px;" -->
<audio id="sample-player"
controls
loop
onplay="sample_play();"
onpause="sample_pause()"
class="btn btn-sm my-auto">
<source src="{{ instance.audio.url }}"
type="audio/mpeg">
</audio>
</div>
<div class="col-auto my-auto">
<span class="lead ml-1 my-auto text-warning"><b>{{ instance.title }}</b></span>
</div>
</div>
<!-- song description -->
<div class="row my-auto pb-2 text-justify">
<span class="text my-auto">{{ instance.description }}</span>
</div>
<!-- scripts -->
<script type="text/javascript">
function sample_play()
{
var player = document.getElementById('sample-player'); // <audio>
var playContainer = document.getElementById('sample-container'); // <div>
var isPlaying = (!player.paused);
if (isPlaying)
{
player.style = 'background:crimson; border-radius:27px';
};
}
function sample_pause()
{
var player = document.getElementById('sample-player'); // <audio>
var playContainer = document.getElementById('sample-container'); // <div>
var isPlaying = (!player.paused);
if (!isPlaying)
{
player.style = 'background:none; border-radius:27px';
}
}
</script>寻求帮助，我需要一个人，帮助，而不是任何人，哈哈，披头士。这是在页面上填充项的主循环(django/python)，它位于另一个文件中：
{% for obj in object_list %}
<div class="row mx-auto my-auto bg-transparent border-bottom border-primary">
<div class="col my-auto ">
{% include 'products/snippets/card.html' with instance=obj %}
</div>
</div>
{% endfor %}现在怎么办？
Stack Overflow用户
发布于 2019-03-23 04:24:32
进展缓慢:音频标记有两个事件，相同的函数调用：
onplay="sample_play()"
onpause="sample_play()"函数sample_play()已经简化：
<script type="text/javascript">
function sample_play()
{
var player = document.getElementById('sample-player')
if (!player.paused)
{
player.style = 'background:crimson; border-radius:27px'
}
else
{
player.style = 'background:none; border-radius:27px'
}
}
</script>但是，它仍然只能在页面上的第一个音频元素上工作。我觉得很奇怪。寻求帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55310157
复制相关文章
相似问题
腾讯云开发者
