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

使用.get [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'事件，以确保对象知道长度。

在此之后，您必须使用“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();
}
});

你必须玩它才能确保在你的情况下最好的是什么，例如恢复（再次播放）方法将它延迟一秒左右。

使用此方法时，您不必使用自动播放功能，因为大部分时间它都不起作用。

希望它有所帮助，greetz， Erwinus

Answer 3

您可以通过将t=<time>添加到网址来设置开始时间，如下所示：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Specifying_playback_range

E.g。 <audio src="http://example.com/audio.mp3#t=50></audio>

Answer 4

我在我的案例中发现，某个地方的情境存在问题。我在窗口上下文中初始化音频，但是当我尝试从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 5

这对我有用。

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

希望它有所帮助！

Answer 6

这为我解决了这个问题：


  $("p#sound audio").on('loadedmetadata', () => {
    $("p#sound audio").get(0).load();
  });

所以我以后可以设置currentTime而不用担心是否加载了音频。

设置<audio>标签的currentTime不起作用？</audio>

6 个答案: