添加 HTML 音频播放器时间线功能

Posted 2023-02-25

【中文标题】添加 HTML 音频播放器时间线功能

【英文标题】：HTML audio player timeline functionality add

【发布时间】：2016-08-23 06:55:46

【问题描述】：

我正在尝试添加 html 音频播放器。我在那里应用了一个代码播放暂停工作。我需要在这里添加时间线功能。但不知道该怎么做。这里还有另一个问题，我不知道如何在同一个按钮中应用播放暂停。请帮我。下面是我的代码。 sample

#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:focusbackground: url('https://img.pranavc.in/20') ;
.pause, .pause:hover, .play:focusbackground: 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>

【参考方案1】：

我使用 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代码，并更改html dom。

要播放音乐，必须点击播放按钮，如果要播放音乐，请更改代码

感谢很好的回答。在这里我需要做更多的工作，只是在播放时增加时间线，在暂停时关闭时间线。

var playhead = document.getElementById("playhead"); audio.addEventListener("timeupdate", function() var duration = this.duration; var currentTime = this.currentTime; var percent = (currentTime / duration) * 100; playhead.style.left = percent * 4 + 'px' ; );

【参考方案2】：

您需要在页面上添加 Javascript 代码才能使用此功能。你可以从这段代码中提取你想要的代码（很好解释）。

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

【讨论】：

感谢您的回答。我应用了您建议页面中的代码。但不能从我这边工作。 jsfiddle.net/lemonkazi/jpn53tfs

【参考方案3】：

<audio controls>
    <source src="Link.mp3" type="audio/mpeg">
</audio>

试试上面的代码。 注意： Internet Explorer 8 及更早版本不支持音频标签。 检查此链接：http://www.w3schools.com/tags/tag_audio.asp

【讨论】：

我知道这个解决方案。但我需要应用设计，所以我采用了不同的方式。谢谢你的回答。