HTMLオーディオプレーヤータイムライン機能追加

Question

HTMLオーディオプレーヤーを追加しようとしています。そこにコードを適用して、一時停止を再生します。ここにタイムライン機能を追加する必要があります。しかし、それをどうやって行うのか分からない。ここで別の問題はまた、私は同じボタンで再生の一時停止を適用する方法を知らない。私を助けてください。以下は私のコードです。 sample

#audioplayer{ 
 
\t width: 480px; 
 
\t height: 60px; 
 
\t 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('http://www.alexkatz.me/codepen/images/play.png') ;} 
 
.pause, .pause:hover, .play:focus{background: url('http://www.alexkatz.me/codepen/images/pause.png') ;} 
 

 
#timeline{ 
 
\t width: 400px; 
 
\t height: 20px; 
 
\t margin-top: 20px; 
 
\t float: left; 
 
\t border-radius: 15px; 
 
\t background: rgba(0,0,0,.3); 
 
    
 
} 
 
#playhead{ 
 
\t width: 18px; 
 
\t height: 18px; 
 
\t border-radius: 50%; 
 
\t margin-top: 1px; 
 
\t background: rgba(0, 0, 0,1); 
 

 
}

<audio id="player" src="http://www.alexkatz.me/codepen/music/interlude.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> 
 
\t <div id="timeline">  
 
\t \t <div id="playhead"></div> 
 
\t </div> 
 
</div>

Answer 1

私はjavascriptを使用し、domとcssを変更します。 あなたはオーディオのイベントとプロパティを習得する必要があります。答えを

var audio = document.getElementById("player"); 
 
var btn = document.getElementById("pButton"); 
 
btn.addEventListener("click", function(){ 
 
    if (audio.paused) { 
 
    \t audio.play(); 
 
     btn.classList.remove("pause"); 
 
     btn.classList.add("play"); 
 
    } else { 
 
    \t 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; 
 
\t width: 480px; 
 
\t height: 60px; 
 
\t margin: 50px auto auto auto; 
 
    border: solid; 
 
} 
 

 
#pButton{ 
 
    height:60px; 
 
    width: 60px; 
 
    border: none; 
 
    float:left; 
 
    outline:none; 
 
} 
 

 
#pButton.pause { 
 
    background: url('http://www.alexkatz.me/codepen/images/play.png') no-repeat; 
 
    background-size: 56px; 
 
    background-position: center; 
 
} 
 

 
#pButton.play { 
 
    background: url('http://www.alexkatz.me/codepen/images/pause.png') no-repeat; 
 
    background-size: 56px; 
 
    background-position: center; 
 
} 
 

 
#timeline{ 
 
\t width: 400px; 
 
\t height: 20px; 
 
\t margin-top: 20px; 
 
\t float: left; 
 
\t border-radius: 15px; 
 
\t background: rgba(0,0,0,.3); 
 
    position: relative; 
 
} 
 
#playhead{ 
 
\t width: 18px; 
 
\t height: 18px; 
 
\t border-radius: 50%; 
 
\t margin-top: 1px; 
 
\t background: rgba(0, 0, 0,1); 
 
    position: absolute; 
 
    left: 0px; 
 
}

<audio id="player" src="http://www.alexkatz.me/codepen/music/interlude.mp3"></audio> 
 
<div id="audioplayer"> 
 
<button id="pButton" class="pause"></button> 
 
<div id="timeline">  
 
\t <div id="playhead"></div> 
 
</div> 
 
</div>

Answer 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

Answer 3

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

上記のコードを試してみてください。 注：オーディオタグは、Internet Explorer 8およびそれ以前のバージョンではサポートされていません。 このリンクをチェックする：http://www.w3schools.com/tags/tag_audio.asp