首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在任意位置启动HTML5 <Audio>

在任意位置启动HTML5 <Audio>
EN

Stack Overflow用户
提问于 2012-03-23 04:55:08
回答 3查看 1.9K关注 0票数 3

我有一个大约2小时长的音轨,我想在我的网站上使用。我想让它在页面加载时在一个随机位置开始播放曲目。这可以使用HTML5实现吗?我知道您可以使用element.currentTime()函数来获取当前位置,但是在完全下载之前,如何获取曲目的总时间呢?我已经尝试了.load、.preload、.autobuffer和更多的各种组合。

代码语言:javascript
运行
复制
<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();

}

谢谢:)

EN

回答 3

Stack Overflow用户

发布于 2012-03-23 05:00:41

如果无法从HTML元素获取信息,则可以确定在服务器上的持续时间,并将该信息作为数据属性传递给HTML5。例如:

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

其中7200是以秒为单位的时间(或其他时间单位)。然后,您可以在JavaScript中使用此属性的值来决定从何处开始音频文件。

票数 1
EN

Stack Overflow用户

发布于 2012-03-23 05:04:56

daJukebox.duration返回什么?它应该是以秒为单位的曲目总长度。

我做了一点研究,看起来.duration只有在服务器被正确设置为type=“音频/MP3”name="filename.mp3“(或ogg)的情况下才能工作,检查你的开发控制台的网络标签,我打赌你的服务器正在发送的文件类型是octet/stream,这会导致Opera中的"infinite"和其他浏览器中的NaN的持续时间。

票数 1
EN

Stack Overflow用户

发布于 2012-03-23 05:03:02

我自己还没有设置,但我在http://dev.opera.com/articles/view/html5-audio-radio-player/上找到了这些示例

代码语言:javascript
运行
复制
// 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);

我不知道这有多大的交叉兼容性,但这表明您可以做一些类似这样的事情

代码语言:javascript
运行
复制
var audio = new Audio('test.ogg');
audio.currentTime = "some time format I'm not sure how to format yet";
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9830375

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档