设置<audio>标签的当前时间不起作用？

Question

我有这个音频标签在后台播放，我可以在几秒钟内将进度存储到cookie中。 但绝不能从该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> 

这是否与从头再次加载的歌曲有关？

谢谢！

编辑：

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

随着。获得[0]，它也不起作用。

有人可以请我帮忙吗？不胜感激！

Answer 1

在设置当前时间之前，您需要等到audio来源加载。

$(function(){ 
    $('audio').bind('canplay', function(){ 
     $(this)[0].currentTime = $.cookie('audioTime'); 
    }); 
}); 

Answer 2

起初有在你的代码中的错误，因为currentTime的不是jQuery的一部分（但你已经知道这一点）

$("p#sound audio").currentTime // is incorrect (refers to a property of jQuery) 
$("p#sound audio")[0].currentTime // is correct (refers to a property of DOM element) 

我发现，音频标签有一些奇怪的事情，并能在浏览器中操作不同，例如在Chrome中。

首先，您必须等待'durationchange'事件才能确定对象已知该长度。

在这之后，你必须用“pause()”功能下手“play()”流（如果尚未启动），并暂停（有时在短暂的延迟之后）。然后您可以使用该值更改'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

Answer 3

我在我的情况下发现的是，有一个与上下文中的问题的地方。我在窗口上下文中初始化音频，但是当我尝试从XMLHttpRequest响应中更改currentTime时，它不起作用。我还不知道答案，但我提供了一个线索，也许一位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; 
    }; 
}; 

Answer 4

您可以通过添加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>

Answer 5

这适用于我。

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

希望它有帮助！