Entrar Ainda não tem acesso?
3
respostas

Problema ao alterar valor da tag audio com angular

Referente ao curso AngularJS: crie webapps poderosas

por Anthony Rodrigues
| 59k xp | 18 posts
Desenvolvedor PHP

Boa noite pessoal, estou trabalhando numa aplicação e estou com problema para alterar o valor de src da tag audio quando o usuário clica em botao. Cada botão deve colocar uma música pra tocar

No index eu tenho o seguinte código:

<div ng-controller="escolhaSeuPlayerCtrl">
        <audio id="radio-player" autoplay="true" ng-src={{radio}}>
          <p>Voc� est� offline ou seu dispositivo n�o tem suporte a essa funcionalidade.</p>
        </audio>
    </div>

Na tela onde dos botões esse:

<ul class="estacao_radios" ng-controller="escolhaSeuPlayerCtrl">
    <li class="estacao_radio festa">
        <input name="estacao_radio" type="radio" id="festa" ng-model="radioid" value="festa" ng-click="radiofesta">
        <label for="festa">Festa</label>
    </li>
    <div class="spacer" style="width: 300px; height: 16px;"></div>
    <li class="estacao_radio modao">
        <input name="estacao_radio" type="radio" id="modao" ng-model="radioid" value="modao" ng-click="radiomodao">
        <label for="modao">Modao</label>
    </li>
    <div class="spacer" style="width: 300px; height: 16px;"></div>
    <li class="estacao_radio todos">
        <input name="estacao_radio" type="radio" id="todos" ng-model="radioid" value="todos" ng-click="radiotodos">
        <label for="todos">Todos</label>
    </li>
</ul>

E por fim o controler, eu ja tentei de dois jeitos: 1 jeito

$scope.radioid='festa';
  $scope.radiofesta=function festa() {
    $scope.radio="musica1";
  }
  $scope.radiomodao=function modao() {
      $scope.radio="musica2";
  }
  $scope.radiotodos=function todos() {
    $scope.radio="musica3"
  }

2 jeito:

var radiofesta = function(){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', "musica1");
    audioElement.play();
  }

  var radiomodao = function(){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', "musica2");
    audioElement.play();
  }

  var radiotodos = function(){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', "musica3");
    audioElement.play();
  }

Como posso fazer para que ao clicar no botão, automaticamente o valor de {{radio}} seja alterado na index e com isso troque a música?? Alguém consegue me ajudar?

3 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Vi no seu perfil que não fez ou não concluiu o curso de Angular ds Alura. Seria bom você terminar o curso para ficar mais seguro.

Respondendo sua pergunta: faça um bind para a propriedade src da mesma maneira que você fez bind para a propriedade src de img que você aprendeu bo curso. Mas via diretiva customizada.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Estou tendo dificuldade de entender algumas coisas no seu código. Por exemplo, você esta usando manipulação de dom em um controller e fazer isso é jogar fora o propósito do Angular que é tirar esss responsabilidade do desenvolvedor. Não faz sentido.

Como você esta fazendo isso por que não fez a app sem Angular?

Segue um exemplo de uma custom directive (não sei se vc já assistiu a aula sobre)

http://stackoverflow.com/questions/17257435/ng-model-for-html5-audio-element-in-angularjs

por Anthony Rodrigues
| 59k xp | 18 posts
Desenvolvedor PHP

Estou mudando para uma directive.

Mas ainda estou vendo como faria o bind, mas quando clicasse no botão que pertence a outra diretiva, mudasse o valor. Achei esse código de play/pause.

.directive('myAudio', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attr) {
            var player = element.children('.player')[0];
            element.children('.play').on('click', function() {
                player.play();
            });
            element.children('.pause').on('click', function() {
                player.pause();
            });
        }
    };
});

Vou alterar pra funcionar para a mudança de musica.