Установка currentTime тега <audio>не работает? - PullRequest
Новая
       0

Установка currentTime тега <audio>не работает?

12 голосов
/ 24 декабря 2011

У меня есть этот аудио тег, играющий в фоновом режиме, и я могу сохранить прогресс в секундах в cookie Но я никоим образом не могу запустить аудио из этого куки. (для продолжения на других страницах) 

$("p#sound audio").currentTime = $.cookie("audioTime");

<audio autoplay="autoplay" loop="loop" ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime); $.cookie('audioTime', Math.floor(this.currentTime));">
    <source src="audio/song.ogg" type="audio/ogg" />
    <source src="audio/song.mp3" type="audio/mp3" />
    Your browser does not support the audio tag.
</audio>
<span id="tracktime">0</span>

Это связано с тем, что песня загружается заново с самого начала?

Спасибо!

EDIT: 

$("p#sound audio").get[0].currentTime

С .get [0] он тоже не работает.

Может кто-нибудь, пожалуйста, прояснить ситуацию для меня? С благодарностью!

Ответы [ 5 ]

7 голосов
/ 07 марта 2012

Вам нужно подождать, пока audio источник загрузится, прежде чем устанавливать текущее время. 

$(function(){
    $('audio').bind('canplay', function(){
        $(this)[0].currentTime = $.cookie('audioTime');
    });
});
4 голосов
/ 01 сентября 2012

Сначала в вашем коде есть ошибка, так как currentTime не является частью jQuery (но вы уже знаете это)по-разному от браузера к браузеру, например в Chrome.

Сначала нужно дождаться события 'durationchange', чтобы убедиться, что длина известна объекту.

После этого вам нужно запустить поток с 'play()'(если он еще не запущен) и приостановите его (иногда после небольшой задержки) с помощью функции pause().Затем вы можете изменить свойство currentTime со значением.После этого вам нужно снова запустить поток с помощью функции 'play().

Также иногда необходимо загрузить поток самостоятельно с помощью функции 'load()'.

Примерно так: 

$(document).ready( function()
{
var a = $('audio:first'),
    o = a[0];

a.on( 'durationchange', function(e)
{
  var o = e.target;
  if( o )
  {
   o.pause();
   o.currentTime = parseInt( $.cookie("audioTime"));
   o.play();
  } 
});

if( o )
{
  o.load();
  o.play();
}
});

Вы должны поиграть с ним, чтобы быть уверенным, что лучше в вашей ситуации, например, метод возобновления (воспроизведения снова), чтобы задержать его на секунду или около того.

При использовании этого метода вам не нужно использовать функцию автозапуска, потому что большую часть времени она не работает.

Надеюсь, это поможет, привет, Erwinus

3 голосов
/ 02 июня 2015

Вы можете установить время начала, добавив t=<time> к URL, как описано здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Specifying_playback_range

Например, <audio src="http://example.com/audio.mp3#t=50></audio>

1 голос
/ 18 июля 2013

В моем случае я обнаружил, что где-то есть проблема с контекстом.Я инициализирую аудио в контексте окна, но когда я пытаюсь изменить currentTime из ответа XMLHttpRequest, он НЕ работает.Я пока не знаю ответа, но даю подсказку, может быть, специалист по Javascript будет знать, как заставить его работать. 

/* initialize this.audio player */
Audio = function() {
    var that = this;
    // keep track of playback status
    var AudioStatus = {
            isPlaying : false
    };

    // define references to this.audio, pulldown menu, play-button, slider and time display
    that.audio = document.querySelector("AUDIO");

    /* load track by menu-index */
    var loadTrack = function() {

        if(that.audio == null){
            log("audio null"); return;
        }
        that.audio.src = '../sounds/400.mp3';
        that.audio.load();
    };

    /* callback to play or pause */
    that._play = function() {
        if(that.audio == null){
            log("audio null"); return;
        }  
        that.audio.play();
        AudioStatus.isPlaying = true;
    };

    that._pause = function() {

        if(that.audio == null){
            log("audio null"); return;
        }
        that.audio.pause();
        AudioStatus.isPlaying = false;
    };

    that.playPause = function() {
        if (that.audio.paused) {
            self._play();
        }
        else {
            self._pause();
        }
    };

    /* callback to set or update playback position */
    that.updateProgress = function(value) {
        if(that.audio == null){
            log("audio null"); return;
        }
        that.audio.currentTime = value;    // <<<--- it does NOT work if I call from XMLHttpRequest response but it DOES if it is called from a timer expired call back
    };

    that.isAudioPlaying = function(){
        return AudioStatus.isPlaying;
    };
};
0 голосов
/ 13 апреля 2016

Это работает для меня.

if (!isNaN(audio.duration)) {
    audio.currentTime = 0;
}

Надеюсь, это поможет!

...