how to show the current song playing in my streaming

0

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
    }
   }
    
asked by anonymous 11.06.2018 / 20:16

0 answers