Đặt thời gian hiện tại của thẻ <audio> không hoạt động?

Question

Tôi có thẻ âm thanh này phát trong nền và tôi có thể lưu trữ tiến trình tính bằng giây cho một cookie. Nhưng tôi không thể bắt đầu âm thanh từ cookie đó. (để tiếp tục trên các trang khác)

$("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> 

Điều này có liên quan đến bài hát được tải lại từ đầu không?

Cảm ơn!

EDIT:

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

Với .get [0], nó không hoạt động nữa.

Ai đó có thể làm rõ mọi thứ cho tôi không? Được đánh giá cao!

Answer 1

Bạn cần đợi đến audio tải nguồn trước khi đặt thời gian hiện tại.

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

Answer 2

Lúc đầu có một lỗi trong mã của bạn vì currentTime không phải là một phần của jQuery (nhưng bạn đã biết điều này)

$("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) 

Tôi khám phá ra rằng thẻ âm thanh có một số những điều kỳ lạ và có thể hoạt động khác với trình duyệt đến trình duyệt, ví dụ: trong Chrome.

Lúc đầu, bạn phải đợi sự kiện 'durationchange' để đảm bảo độ dài được đối tượng biết.

Sau đó, bạn phải bắt đầu luồng bằng 'play()' (nếu chưa bắt đầu) và tạm dừng (đôi khi sau một khoảng thời gian trễ) với chức năng 'pause()'. Sau đó, bạn có thể thay đổi thuộc tính 'currentTime' bằng giá trị. Sau đó, bạn phải bắt đầu lại luồng bằng cách sử dụng hàm 'play() '.

Đôi khi, đôi khi cũng cần phải tự tải luồng bằng cách sử dụng chức năng 'load()'.

Something như thế này:

$(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(); 
} 
}); 

Bạn phải chơi với nó để chắc chắn những gì là tốt nhất trong tình huống của bạn, ví dụ như sơ yếu lý lịch (đóng lại) phương pháp để trì hoãn nó trong một giây hoặc lâu hơn.

Khi sử dụng phương pháp này, bạn không phải sử dụng tính năng tự động phát vì phần lớn thời gian nó không hoạt động.

Hy vọng nó giúp, Greetz, Erwinus

Answer 3

những gì tôi tìm thấy trong trường hợp của tôi là có một vấn đề với bối cảnh ở đâu đó. Tôi khởi tạo âm thanh dưới ngữ cảnh cửa sổ nhưng khi tôi cố gắng thay đổi currentTime từ phản hồi XMLHttpRequest, nó không hoạt động. Tôi không biết câu trả lời nào được nêu ra nhưng tôi cung cấp một đầu mối có thể là một chuyên gia trong Javascript sẽ biết làm thế nào để làm cho nó hoạt động.

/* 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

Bạn có thể thiết lập thời gian bắt đầu bằng cách thêm t=<time> vào URL, như ghi nhận ở đây: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Specifying_playback_range

Ví dụ: <audio src="http://example.com/audio.mp3#t=50></audio>

Answer 5

Điều này phù hợp với tôi.

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

Hy vọng điều đó sẽ hữu ích!