添加HTML音频播放器时间轴功能
HTML audio player timeline functionality add
我正在尝试添加HTML音频播放器。我在那里应用了一个代码播放暂停工作。我需要在这里添加时间轴功能。但不知道怎么做。这里还有一个问题,我不知道如何在同一个按钮中应用播放暂停。请帮帮我。下面是我的代码。样品
#audioplayer{
width: 480px;
height: 60px;
margin: 50px auto auto auto;
border: solid;
}
#pButton{
height:60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
float:left;
outline:none;
}
.play, .play:hover, .pause:focus{background: url('https://img.pranavc.in/20') ;}
.pause, .pause:hover, .play:focus{background: url('https://img.pranavc.in/30') ;}
#timeline{
width: 400px;
height: 20px;
margin-top: 20px;
float: left;
border-radius: 15px;
background: rgba(0,0,0,.3);
}
#playhead{
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: 1px;
background: rgba(0, 0, 0,1);
}
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div id="audioplayer">
<button id="pButton" class="play" onclick="document.getElementById('player').play()"></button>
<button id="pButton" class="pause" onclick="document.getElementById('player').pause()"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
我使用javascript,并更改dom和css。你需要学习音频事件和属性。
var audio = document.getElementById("player");
var btn = document.getElementById("pButton");
btn.addEventListener("click", function(){
if (audio.paused) {
audio.play();
btn.classList.remove("pause");
btn.classList.add("play");
} else {
audio.pause();
btn.classList.remove("play");
btn.classList.add("pause");
}
});
var playhead = document.getElementById("playhead"); audio.addEventListener("timeupdate", function(){ var duration = this.duration; var currentTime = this.currentTime; var percentage = (currentTime / duration) * 100; playhead.style.left = percentage * 4 + 'px'; });
#audioplayer{
position: relative;
width: 480px;
height: 60px;
margin: 50px auto auto auto;
border: solid;
}
#pButton{
height:60px;
width: 60px;
border: none;
float:left;
outline:none;
}
#pButton.pause {
background: url('https://img.pranavc.in/20') no-repeat;
background-size: 56px;
background-position: center;
}
#pButton.play {
background: url('https://img.pranavc.in/30') no-repeat;
background-size: 56px;
background-position: center;
}
#timeline{
width: 400px;
height: 20px;
margin-top: 20px;
float: left;
border-radius: 15px;
background: rgba(0,0,0,.3);
position: relative;
}
#playhead{
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: 1px;
background: rgba(0, 0, 0,1);
position: absolute;
left: 0px;
}
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div id="audioplayer">
<button id="pButton" class="pause"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
您需要在页面上添加Javascript代码才能拥有此功能。你可以从这个代码中提取你想要的代码(Nicely解释道(。
https://www.developphp.com/video/JavaScript/Audio-Play-Pause-Mute-Buttons-Tutorial
https://www.developphp.com/video/JavaScript/Audio-Seek-and-Volume-Range-Slider-Tutorial
<audio controls>
<source src="Link.mp3" type="audio/mpeg">
</audio>
试试上面的代码注意:Internet Explorer 8及更早版本不支持音频标记。检查此链接:http://www.w3schools.com/tags/tag_audio.asp
相关文章:
- 如何使用自定义功能覆盖时间轴对象.js时间轴对象的_repaintMinorText
- 如何为同一功能设置 2 个时间间隔
- CSS与Jquery、滑块、动画、灯箱..加载时间与功能
- 流星是否提供时间选择器功能
- 为什么我的保存时间功能不起作用?PHP + AJAX JS.
- 一定时间后开/关功能
- 设置超时功能,具有钢琴应用程序的动态持续时间
- 一段时间后启动功能
- 获取两个位置之间的距离和时间的功能
- 一段时间后的Titanium iPhone刷新功能
- 自动刷新JavaScript功能在一段时间后停止工作
- Javascript加载功能只能在一半的时间内工作(Firefox)
- 功能会随着时间的推移而加速
- 谷歌分析是否有一个“;心跳;用于长时间运行的web应用程序的功能
- 是否有一个库可以提供时间增量功能
- 控制MooTools 1.2中淡入淡出功能的持续时间
- 如何在1小时3分钟内将功能时间和日期转换为类似内容
- 使用moment.js、js或Jquery,在一个时间范围内打开一个功能
- IE-11贬低了与时间相关的功能.在ie11中使用什么来代替t:seq来切换图像
- 如何停止时间间隔在我的功能