1

Estou desenvolvendo um botão para tocar audio em determinadas partes para o meu site, por exemplo para ter a narração de determinado paragrafo, quero fazer isso dinamicamente, por exemplo colocando determinada classe e um data, ele irá buscar no diretório a faixa selecionada.

Tentei fazer um código mais ou menos com a idéia que tenho em mente dessa função

function click(){
$('.audioplay').each(function(i){
    var audioplay = new Audio('urldafaixa');
    audioplay.preload = "auto";
    $(this).click(function(e) {
        e.preventDefault();
        audioplay.currentTime = 0;
        audioplay.play();
        audioplay.volume = 1;
        $(this).data("audio-click");
    });
});
}  
5
  • 1
    e qual a duvida? o codigo da erro? nao funciona como voce espera? Commented 26/02/2019 às 16:20
  • Assim funciona, mas toda vez que for inserir um audio vou ter que criar uma variável diferente, por exemplo audioplay2, 3 e assim por diante, o que eu queria seria um jeito de inserir varios audios em diferentes lugares da página sem precisar replicar essa função, por isso pensei em criar um data, talvez fazer o data pegar a url da faixa, mas não estou conseguindo fazer isso
    – Thi100
    Commented 26/02/2019 às 16:38
  • 1
    @Thi100, pode usar o atributo data-, como citaste, como também um array para armazenar as URLs dos áudios. Commented 26/02/2019 às 16:39
  • poderia me mostrar um exemplo ?
    – Thi100
    Commented 26/02/2019 às 16:40
  • Como tens acesso a cada url? isso está no HTML? podes dar um exemplo do HTML?
    – Sergio
    Commented 26/02/2019 às 17:43

1 Resposta 1

2

Desse jeito, todos os botões que vc criar com essa classe e esse atributo serão "tocáveis"

<html>

<head>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>

    <style>
        .btnPlayAudio {
            min-width: 200px;
            margin-top: 10px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div style="text-align: center;">
        
        <button class="btnPlayAudio btn btn-success" data-audiourl="https://www.thesoundarchive.com/starwars/star-wars-theme-song.mp3">
            Start Wars Theme
        </button>
        
        <button class="btnPlayAudio btn btn-warning" data-audiourl="https://www.thesoundarchive.com/starwars/star-wars-cantina-song.mp3">
            Cantina Song
        </button>
        
        <button class="btnPlayAudio btn btn-danger" data-audiourl="https://www.thesoundarchive.com/starwars/imperial_march.mp3">
            Imperial March
        </button>

        <button class="btn btn-primary" onclick="stopAll()" style="margin-top: 15px;">
            Stop All
        </button>

    </div>

    <script>
        var listaAudios = [];

        $(document).ready(function () {
            //já que você quer fazer o carregamento antecipado de tudo, pode fazer isso quando 
            //a página for carregada. Pode ser ruim fazer isso se forem muitos
            //arquivos e muito grandes.

            $('.btnPlayAudio').each(function (e) {
                var url = $(this).attr('data-audiourl');
                var audioPlay = new Audio(url);
                audioPlay.preload = "auto";

                var audioData = {
                    'url': $(this).attr('data-audiourl'),
                    'audioPlayObj': audioPlay
                };

                listaAudios.push(audioData);
            });
        });

        $('.btnPlayAudio').click(function () {
            var url = $(this).attr('data-audiourl');
            for (var i = 0; i < listaAudios.length; i++) {
                if (listaAudios[i].url == url) {
                    var audio = listaAudios[i].audioPlayObj;                        
                    audio.currentTime = 0;
                    audio.volume = 1;
                    audio.play();
                    break;
                }
            }
        });

        function stopAll() {
            for (var i = 0; i < listaAudios.length; i++) {
                listaAudios[i].audioPlayObj.pause();
            }
        }

    </script>

</body>

</html>

1
  • pode melhorar assinando o callback pra saber se o audio já foi carregado ou não e exibindo algum feedback na tela pra isso Commented 26/02/2019 às 18:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .