HTML5 오디오 위치 설정

HTML5 오디오 위치 설정

---

HTML5 오디오 요소 에서 특정 시간 오프셋으로 이동하는 방법은 무엇입니까?

그들은 단순히 자신의 currentTime속성을 설정할 수 있다고 말합니다 (강조 표시) :

currentTime속성은 점점에, 초 단위로 표시 현재 재생 위치를 반환해야합니다. 설정시 미디어 요소에 현재 미디어 컨트롤러가있는 경우 INVALID_STATE_ERR 예외를 throw해야합니다. 그렇지 않으면 사용자 에이전트는 새 값을 찾아야합니다 (예외가 발생할 수 있음).

아아, 작동하지 않는 것 같습니다 (Chrome에서 필요합니다).

비슷한 질문이 있지만 대답은 없습니다.

---

내 크롬 에서 작동합니다 ...

$('#audio').bind('canplay', function() {
  this.currentTime = 29; // jumps to 29th secs
});

---

오디오 파일을 이동하려면 서버를 올바르게 구성해야합니다.

클라이언트는 파일의 특정 영역을 검색하고 재생하기 위해 바이트 범위 요청 을 보내 므로 서버는 적절하게 응답해야합니다.

아직 다운로드되지 않은 미디어 영역의 검색 및 재생을 지원하기 위해 Gecko는 HTTP 1.1 바이트 범위 요청을 사용하여 검색 대상 위치에서 미디어를 검색합니다. 또한 X-Content-Duration 헤더를 제공하지 않는 경우 Gecko는 미디어의 지속 시간을 결정하기 위해 바이트 범위 요청을 사용하여 미디어의 끝을 찾습니다 (Content-Length 헤더를 제공한다고 가정).

그런 다음 서버가 바이트 범위 요청에 올바르게 응답하면 다음을 통해 오디오 위치를 설정할 수 있습니다 currentTime.

audio.currentTime = 30;

MDN의 Ogg 미디어 용 서버 구성을 참조하십시오 (실제로 다른 형식에도 동일하게 적용됨).

또한 HTML5 Ogg 비디오 및 오디오 용 웹 서버 구성을 참조하십시오 .

---

#tURI 시간 범위 속성을 사용할 수 있으며
이는 오디오 및 비디오 미디어 모두에 유효합니다 .

stackoverflow.mp3#t=8.5 // Will start playing from the 8.5 sec.

var a = new Audio();
a.src= "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg#t=4.5";
a.play();

특정 범위 로 동적으로 건너 뛰 려면 HTMLMediaElement를 사용 하십시오. currentTime :

audio.currentTime = 8.5;

---

훨씬 쉽게 솔루션입니다

var element = document.getElementById('audioPlayer');

//first make sure the audio player is playing
element.play(); 

//second seek to the specific time you're looking for
element.currentTime = 226;

---

오디오 요소를 재생할 준비가 된 후currentTime 속성 을 설정해야합니다 . 사양에 정의 된 이벤트 속성에 함수를 바인딩 할 수 있습니다 .oncanplay

실패한 코드 샘플을 게시 할 수 있습니까?

---

Firefox는 또한 아직로드되지 않은 콘텐츠를 찾을 때 바이트 범위 요청을합니다. 이는 단순한 크롬 문제가 아닙니다. 응답 헤더 "Accept-Ranges : bytes"를 설정하고 206 Partial Content 상태 코드를 반환하여 모든 클라이언트가 바이트 범위 요청을 할 수 있도록합니다.

참조 https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly를

---

오디오 진행률 표시 줄이 작동하지 않지만 오디오가 제대로 작동하는 문제에 직면했습니다. 이 코드는 저에게 효과적입니다. 그것이 당신에게도 도움이되기를 바랍니다. 여기서 노래는 오디오 구성 요소의 대상입니다.

HTML 부분

<input type="range" id="seek" value="0" max=""/>

JQuery 부분

    $("#seek").bind("change", function() {
            song.currentTime = $(this).val();               
        });

song.addEventListener('timeupdate',function (){

    $("#seek").attr("max", song.duration);
    $('#seek').val(song.currentTime);
    });

---

The @katspaugh's answer is correct, but there is a workaround that does not require any additional server configuration. The idea is to get the audio file as a blob, transform it to dataURL and use it as the src for the audio element.

Here is solution for angular $http, but if needed I can add vanilla JS version as well:

$http.get(audioFileURL,
        {responseType:'blob'})
        .success(function(data){
            var fr = new FileReader;
            fr.readAsDataURL(data);
            fr.onloadend = function(){
                domObjects.audio.src = fr.result;
            };
        });

cautions

1. This workaround is not suitable for large files.
2. It will not work cross-origin unless CORS are set properly.

---

Set time position to 5 seconds:

var vid = document.getElementById("myAudio");
vid.currentTime = 5;

참고URL : https://stackoverflow.com/questions/9563887/setting-html5-audio-position