延迟后播放音频标签？

Question

延迟后播放音频标签？

10

我正在使用HTML5中的<audio>标签播放MP3音频文件。

<audio controls="controls" autoplay="autoplay">
  <source src="song.mp3" type="audio/mp3" />
</audio>

这段代码可以正常工作，但我想知道如何在歌曲自动播放之前加入延迟？我知道没有delay属性，但我在想是否可以通过JavaScript实现？

- Charlie

3个回答

7

Javascript only 方法：

var sound = document.createElement('audio')
sound.id = 'audio'
sound.controls = 'controls'
sound.src = 'http://a.tumblr.com/tumblr_leltkjNwWL1qf32t9o1.mp3'
sound.type = 'audio/mp3'
document.body.appendChild(sound)

function playAudio() {
  document.getElementById('audio').play();
}

setTimeout("playAudio()", 3000);

- Philip Kirkbride

“audioElement” 是该元素的类名吗？ - Charlie

实际上，我进行了编辑，使用了document.getElementById('audio').play()。 - Philip Kirkbride

你需要在音频元素中添加ID="audio"。 - Philip Kirkbride

2

尝试以下内容：

HTML：

<div id='audio'>This will be replaced with an audio tag</div>

jQuery:

$(document).ready(function (){
    $("#audio").stop("true").delay('2000').queue(function() { 
      $(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
    });
});

全部在一起将是：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    </head>
    <body>
        <div id='audio'>This will be replaced with an audio tag</div>
        <script type='text/javascript'>
            $(document).ready(function (){
                $("#audio").stop("true").delay('2000').queue(function() { 
                    $(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
                });
            });
        </script>
    </body>
</html>

你可以使用.delay()在jQuery中延迟一个进程。时间以毫秒为单位，所以2000 = 2秒。

- Lil' Bits

1

这并不会按计划正常工作...它调用的是属于jQuery而不是音频API的stop方法。 - marksyzm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ian Routledge · Accepted Answer

试试这个，非常简单，但你应该把JS移出标记...

<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 8000)">
    <source src="Kalimba.mp3" type="audio/mp3" />
</audio>