Question

我有一个约2小时的音轨，我想在我的网站上使用。我想让它在页面加载时开始在随机位置播放曲目。这可能使用HTML5吗？我知道你可以使用element.currentTime（）函数来获取当前位置，但是如何在完全下载之前得到轨道的总时间？我已经尝试过.load .preload .autobuffer和其他几百种组合。

<script>

var stream_url_mp3 = "";
var stream_url_ogg = "";
var stream_total_time = 100;
var stream_start_time = Math.floor(Math.random() * stream_total_time);
var daJukebox = document.createElement('audio');

if (daJukebox.canPlayType) {

    if ("" != daJukebox.canPlayType('audio/mpeg')) {
        daJukebox.src = stream_url_mp3;
    } else if ("" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) {
        daJukebox.src = stream_url_ogg;
    }

    daJukebox.preload = true;
    daJukebox.autobuffer = true;
    daJukebox.pause();
    daJukebox.currentTime = stream_start_time;
    daJukebox.play();

}

谢谢：）

Answer 1

如果无法从HTML5音频元素获取信息，您可以确定服务器的持续时间，并将信息作为数据属性传递给HTML。例如：

<audio id="some-id" data-duration="7200">

其中7200是以秒为单位的时间（或其他一些时间单位）。然后，您可以在JavaScript中使用此属性的值来决定启动音频文件的位置。

Answer 2

daJukebox.duration返回什么？它应该是以秒为单位的轨道总长度。

我进行了一些研究，看起来.duration只有在服务器配置为将文件头正确设置为type =“audio / mp3”name =“filename.mp3”（或者ogg），检查你的开发者控制台的网络选项卡，我打赌你的服务器正在发送类型为octet/stream的文件，这导致Opera的"infinite"持续时间NaN在其他浏览器中。

Answer 3

我自己还没有设置好，但我在http://dev.opera.com/articles/view/html5-audio-radio-player/

找到了这些例子

// Invoke new Audio object
var audio = new Audio('test.ogg');

// Get the play button and append an audio play method to onclick
var play = document.getElementById('play');
play.addEventListener('click', function(){
    audio.play();
}, false);

// Get the pause button and append an audio pause method to onclick
var pause = document.getElementById('pause');
pause.addEventListener('click', function(){
    audio.pause();
}, false);

// Get the HTML5 range input element and append audio volume adjustment to onchange
var volume = document.getElementById('volume');
volume.addEventListener('change', function(){
    audio.volume = parseFloat(this.value / 10);
}, false);

// Get where one are in playback and push the time to an element
audio.addEventListener("timeupdate", function() {
    var duration = document.getElementById('duration');
    var s = parseInt(audio.currentTime % 60);
    var m = parseInt((audio.currentTime / 60) % 60);
    duration.innerHTML = m + '.' + s + 'sec';
}, false);

不知道这是如何交叉兼容的，但这表明你可以做类似

的事情

var audio = new Audio('test.ogg');
audio.currentTime = "some time format I'm not sure how to format yet";

在随机位置</audio>启动HTML5 <audio>

3 个答案: