I would like to know if someone has an example of how I could show the current song that is playing in my stream
, I already searched the internet on this subject but I did not understand very well, I just found something like criar uma streaming
and this is not what I need, I just want to just show the current song that is playing, can anyone help?
HTML
<div class="player" onmouseover="selectPlayer(this)">
<div class="btn absolute">
<div class="control play rep left">
<ul>
<li><span class="btStop">Stop</span></li>
</ul>
</div>
<strong>Música:</strong>
<div class="slider left">
<div class="back relative">
<div class="bar relative"><span class="right" title="Baixar / Aumentar"></span></div>
</div>
</div>
</div>
</div>
JS
var player,drag;
var audioElement,playButton,slider,audioButton,icoAudio;
function selectPlayer(elem){if(player!=elem){
player=elem;
}
audioElement=player.querySelector('audio');
playButton=player.querySelector('.play');
slider=player.querySelector('.slider');
sliderVol=slider.querySelector('.bar');
audioButton=player.querySelector('.audio');
playButton.addEventListener('click',playAudio);
slider.addEventListener('mousedown', startDrag);
slider.addEventListener('mousemove',showVolume);
sliderVol.addEventListener('mousemove',showVolume);
slider.addEventListener('mouseup', startDrag);
sliderVol.addEventListener('mouseup', startDrag);
sliderVol.querySelector('span').addEventListener('mouseup', startDrag);
document.addEventListener('mouseup', startDrag);
}
function startDrag(event){
if(event.type=="mousedown"){
drag=true;
}else{
drag=false;
}
}
function showVolume(event){
if(drag){var w=slider.clientWidth;
var x=(event.clientX)-slider.offsetLeft;
var pctVol=x/w;if(pctVol>1){
sliderVol.style.width=100+"%";
audioElement.volume=1;
}else if(pctVol<0){
sliderVol.style.width=0+"%";
audioElement.volume=0;
}else{
sliderVol.style.width=(x/w)*100+"%";
audioElement.volume=pctVol;
}
}
}
function playAudio(){
if(audioElement.played.length!=0){
if(audioElement.played.start(0)==0&&!audioElement.paused){
audioElement.pause();
audioElement.currentTime=0;
var playButton=document.querySelector('.btStop');
playButton.className = "btPlay";
playButton.innerHTML="<img src='https://i.imgur.com/Q55kVl7.png' alt='Reproduzir' title='Reproduzir'/>";//se o nao player estiver tocando ele exibe o botao de play
}else{
audioElement.play();
var playButton=document.querySelector('.btPlay');
playButton.className="btStop";
playButton.innerHTML="<img src='https://i.imgur.com/B5f0hti.png' alt='Stop' title='Stop'>";//se o player estiver tocando ele exibe o botao de stop
}
}else{
audioElement.play();
var playButton=document.querySelector('.btStop');playButton.className="btPlay";playButton.innerHTML="<img src='https://i.imgur.com/B5f0hti.png' alt='Stop' title='Stop'>";//se a tentativa acima de dar play falhou, ele forca o play e exibe o botao de stop
}
}