html5의 소스 "src" 속성을 변경해도 angularjs에는 적용되지 않습니다.

html5의 소스 "src" 속성을 변경해도 angularjs에는 적용되지 않습니다.

오디오 파일 목록이 링크로 표시되며<audio>html5 플레이어각 링크는 의 src를 변경하는 함수를 호출합니다.<source>안에 태그하다<audio>:

<audio controls="controls" preload="none">
  <source type="audio/mpeg" src="{{selectedSongPath}}"/>
</audio>

...

<div class="songEntry" ng-repeat="song in songs">
  <a href="" ng-click="songSelect(song.path)">{{song.name}}</a>
</div>

...

$scope.songSelect = function(songPath) {
    $scope.selectedSongPath = songPath;
}

src가 바뀌는 것은 보이는데 아무것도 재생되지 않습니다.패스는 정상입니다.패스 중 하나로 src를 초기화하면 플레이어는 동작합니다.

내가 뭘 잘못하고 있지?

다음은 몇 가지 각도가 있는 접근법입니다.

1) src= 대신 ng-src= 사용

각도가 있는 문서는 이 기능이 작동하는 이유를 설명합니다.http://docs.angularjs.org/api/ng.directive:ngSrc

컴파일 단계에서 angular는 요소를 확장하여 올바른 src= 속성을 포함합니다.

그러면 HTML5 오디오 요소의 src 속성이 변경되지만 안타깝게도 새로운 노래를 재생하기에 충분하지 않습니다..play() 메서드를 호출하여 오디오 요소를 실행하도록 유도해야 합니다.

구리다:(

이 경로를 따라 더 해킹을 하면 컨트롤러 내부에서 DOM 조작을 할 수 있습니다.이것은 일반적으로 이것이 잘못된 해결책이라는 신호입니다.

서비스를 이용하는 것이 더 좋은 해결책입니다!!!

2) 각도 서비스를 사용한 오디오

// Define a simple audio service 
mpApp.factory('audio',function ($document) {
  var audioElement = $document[0].createElement('audio'); // <-- Magic trick here
  return {
    audioElement: audioElement,

    play: function(filename) {
        audioElement.src = filename;
        audioElement.play();     //  <-- Thats all you need
    }
    // Exersise for the reader - extend this service to include other functions
    // like pausing, etc, etc.

  }
});

이제 컨트롤러에서 '오디오'를 삽입하여 필요한 작업을 수행할 수 있습니다.

예:

function myAstoundingAudioCtrl($scope, audio) { //<-- NOTE injected audio service

    $scope.songSelect = function(songPath) {
        audio.play(songPath);    //     <---  Thats All You Need !
    }
}

이제 음악을 변경할 수 있어야 하는 컨트롤러에 'audio'를 파라미터로 추가하여 여기서 정의한 것과 동일한 API 호출을 사용할 수 있습니다.

'서비스'이기 때문에 애플리케이션 전체에 대한 인스턴스는 1개뿐입니다.'audio'에 대한 모든 콜이 같은 오브젝트를 가리킵니다.이것은 각도가 있는 모든 서비스에 해당됩니다.이 경우에 필요한 게 바로 그거야

이 서비스는 응용 프로그램의 루트 문서에 보이지 않는 HTML5 요소를 생성하므로 보기에 태그를 추가할 필요가 없습니다.이는 사용자가 다른 보기로 이동하는 동안 곡의 재생을 유지하는 추가적인 이점이 있습니다.

$sec 서비스의 정의에 대해서는, http://docs.angularjs.org/api/ng.$document 를 참조해 주세요.

짝짓기에 도움이 되길 바랍니다:)

$sce.trustAsResourceUrl을 사용해도 같은 문제가 발생했는데 HTML에 문제가 있음을 알게 되었습니다.소스는 오디오 태그 자체에 들어가야 합니다.

<audio controls data-ng-src="{{yourTrustedUrl}}" ></audio>

<audio ng-src="{{getAudioUrl()}}" audioplayer controls></audio>

$scope.getAudioUrl = function() {
return $sce.trustAsResourceUrl('your url');
};

이건 나한테 효과가 있어 넌 널 만족시켜야 해

ngSrc는 AngularJS에서는 비디오에 대응하지 않고 이미지에만 대응합니다.솔루션은 다음과 같습니다.

를 참조해 주세요.

        <video controls="controls" name="Video Name" ng-src="{{getVideoUrl()}}"></video>

컨트롤러:

  $scope.getVideoUrl=function(){
        return $sce.trustAsResourceUrl("media/"+$scope.groupedProjList[$scope.routeId].CONTACTNAME+".mp4");
   };

내 URL을 당신의 URL로 바꿉니다.

$sce.trustAsResourceUrl('your Url');

꼭 추가해 주세요.$sce다음 중 하나:

angular.module('myApp.controllers', [])
  .controller('MyCtrl1',  function($scope,$http,$routeParams,$sce) {

드롭다운 선택 메뉴를 사용하여 비디오 소스를 로딩하는 데 비슷한 문제가 발생했습니다..$scope.$apply();이치노코드를 사용하여 이 구현을 테스트할 시간은 없었지만, 다음을 시도해 보는 것이 좋습니다.

$scope.songSelect = function(songPath) {
    $scope.selectedSongPath = songPath;
    $scope.$apply();
}

용어의 이 있습니다$scope.$apply()처리 오류에 대해 설명합니다.적절한 실장은 실제로 다음과 같다고 생각합니다.

$scope.songSelect = function(songPath) {
    $scope.$apply(function() {
        $scope.selectedSongPath = songPath;
    });
}

은 아마 더 잘 할 수 있을 것이다.songPathundefined; , 를 찾을 수 없습니다.returns undefined; 、 、 、 、 、 、 、 returns returns returns returns returns returns 。츠키노

이것이 도움이 되기를 바랍니다:)

다음 항목도 사용할 수 있습니다.

<div ng-bind-html-unsafe="audioPlayer"></div>

컨트롤러:

$scope.audioPlayer="<br /><audio controls><source src=\""+ audiosource + "\" type=\"audio/mpeg\"> Your browser does not support the audio element. </audio>"

주의:

이 디렉티브는 ngBindHtml 디렉티브가 너무 제한적이고 바인딩하고 있는 콘텐츠의 소스를 절대적으로 신뢰하는 경우에만 사용해야 합니다.

여기에 더

@SteveOC 64의 접근법은 Audio의 새 인스턴스를 만드는 것입니다.Audio 태그가 이미 있는 경우

<audio id="audio" controls></audio>

아래 코드를 사용해 보십시오.

    app.factory('audio', function($document) {
    var audioElement = $document[0].getElementById('audio');
    audioElement.autoPlay = true; // as per your requirement

    return {
      audioElement: audioElement,

      play: function(filename) {
        audioElement.src = filename;
        audioElement.play();
      },
      resume: function() {
        audioElement.play();
      },
      pause: function() {
        audioElement.pause();
      },
      stop: function() {
        audioElement.pause();
        audioElement.src = audioElement.currentSrc; /** http://stackoverflow.com/a/16978083/1015046 **/
      },
      incVol: function() {
        if (audioElement.volume < 1) {
          audioElement.volume = (audioElement.volume + 0.1).toFixed(2);
        }
        return audioElement.volume;
      },
      decVol: function() {
        if (audioElement.volume > 0) {
          audioElement.volume = (audioElement.volume - 0.1).toFixed(2);
        }
        return audioElement.volume;
      },
      timer: function(callback) {
        audioElement.ontimeupdate = function() {
          callback(audioElement.duration, audioElement.currentTime)
        };
      },
    }
  });

에 '아예'를 한 후audiofactory라고 것은 '이라고 할 수 .

 audio.play('/api/resource?resource=' + uri);

다른 요소를 클릭했을 때 오디오 재생과 같이 이벤트 구동일 경우

$scope.$apply(function() {
   $scope.audioPlayer = true;
   audio.play('/api/resource?resource=' + uri);
   $scope.isAudioPlaying = true;
});

또, 비디오 팩토리를 찾고 있는 경우는, 다음의 순서에 따릅니다.

HTML

<video id="video" controls></video>

공장

app.factory('video', function($document) {
       var videoElement = $document[0].getElementById('video');
       videoElement.autoPlay = true;
       return {
          videoElement: videoElement,
          play: function(filename) {
             videoElement.src = filename;
             videoElement.play();
          },
          resume: function() {
             videoElement.play();
          },
          pause: function() {
             videoElement.pause();
          },
          stop: function() {
             videoElement.pause();
             videoElement.src = videoElement.currentSrc; /** http://stackoverflow.com/a/16978083/1015046 **/
          },
          incVol: function() {
             if(videoElement.volume < 1) {
                videoElement.volume = (videoElement.volume + 0.1).toFixed(2);
             }
             return videoElement.volume;
          },
          decVol: function() {
             if(videoElement.volume > 0) {
                videoElement.volume = (videoElement.volume - 0.1).toFixed(2);
             }
             return videoElement.volume;
          },
          timer: function(callback) {
             videoElement.ontimeupdate = function() {
                callback(videoElement.duration, videoElement.currentTime)
             };
          },
       }
    });

이렇게 돼요.video.play('/api/resource?resource=' + uri);

이게 도움이 됐으면 좋겠네요!

제가 찾은 해결책은 ajax 콜에서 비디오 URL을 받는 즉시 비디오를 로드하는 것입니다.

var video = angular.element('#video_id');
video.load();

audio 단, '태그src{{}}.

<audio controls="controls" preload="none">
  <source type="audio/mpeg" src="{{selectedSongPath}}"/>
</audio>

이거 벌써 먹어봤어?

.따라서 src의 해 주세요.songselect 후에$scope.selectedSongPath = songPath;하와같같 같같같다다

$scope.load();

의 경우 $scope는 $입니다.load()메서드는 오디오 태그 객체 내에서 실행해야 합니다. 됩니다.

<audio id="audio-tag" controls="controls" preload="none"> //need the ID to get element
    <source type="audio/mpeg" src="{{selectedSongPath}}"/>
</audio>
....
$scope.selectedSongPath = songPath; //you're changing the src
document.getElementById("audio-tag").load(); //here you load the file (you need equivalent in your framework)

도움이 됐으면 좋겠다.

이전에 ngAudio를 사용하고 있었는데 동시에 여러 개의 오디오가 재생되는 문제에 직면했습니다.HTML5 오디오 태그를 사용하려고 했을 때, 오디오와 소스를 2개의 태그로 하는 것이 아니라, 1개의 태그로 문제를 해결했습니다.

<audio controls ng-src='{{trusted_url }}'></audio>

위의 답변은 훌륭합니다.다만, 조금 재미삼아, 오디오를 녹음해 플레이어에 추가하는 방법을 나타내는 회답이 아래에 기재되어 있습니다(이는 Angular 14에서 유효합니다).URL도 관리해야 합니다.

<!-- html doc: -->
<button (click)="recordAudio()">record</button>
<audio id="player" [src]="audioURL" controls></audio>

// TS Doc:

export class audioPlayerDemo implements OnInit {
import { DomSanitizer, SafeResourceUrl, SafeStyle, SafeUrl } from '@angular/platform-browser';

  constructor(private sanitizer: DomSanitizer) {}

  audioSrc = new Audio();
  audioURL ? : SafeUrl;

  recordAudio() {
    navigator.mediaDevices
      .getUserMedia({
        audio: true,
        video: false
      })
      .then(
        (stream) => {
          console.log(stream)

          const mediaRecorder = new MediaRecorder(stream);
          mediaRecorder.start();
          const audioChunks: BlobPart[] | undefined = [];
          mediaRecorder.addEventListener("dataavailable", event => {
            audioChunks.push(event.data);
          });
          mediaRecorder.addEventListener("stop", () => {
            const audioBlob = new Blob(audioChunks);
            const audioUrl = URL.createObjectURL(audioBlob);
            this.audioSrc = new Audio(audioUrl);
            this.audioURL = this.sanitizer.bypassSecurityTrustUrl(`${audioUrl}`);
            // this.audioSrc.play();
          });
          setTimeout(() => {
            mediaRecorder.stop();
          }, 6000); // this will stop the recoding after 6 seconds.
        }
      );
  }

언급URL : https://stackoverflow.com/questions/15485768/changing-html5s-source-src-attribute-takes-no-effect-wtih-angularjs