HTML5 音乐播放器外部播放按钮

Question

我正在构建单页视差网站。页面的第一部分是一个徽标和一个显示 "Listen Now"

的文本按钮

单击“立即收听”按钮后，页面会自动向下滚动到嵌入了 HTML5 音乐播放的下一部分。有没有办法让音乐在点击 "Listen Now" 按钮后自动开始播放？

这是我正在处理的页面的 link。我尝试添加事件侦听器，但它似乎不起作用。

http://rob.peytongregory.com/

Answer 1

我假设您已经为按钮绑定了点击事件，所以只需 select 音频元素并调用 .play()。

document.getElementById('yourAudioElementId').play()

编辑：

如果您使用href='sectionID'属性，您可以将其重写为href='#' onclick="customHandler('sectionID'); return false;"

处理程序应包含通过给定哈希滚动到位置并播放音频剪辑的调用。您也可以将音频元素 ID 传递给 customHandler。

Answer 2

假设您使用的是标准 HTML5 <audio> 标签，那么您可以使用它的方法，例如 .play() 和 .stop().

因此，只需向您的按钮添加一个侦听器（如果您还没有附加到它）：

document.getElementById('your-button-id').addEventListener('click', document.getElementById('your-audio-id').play);

// or, similar:
document.getElementById('your-button-id').addEventListener('click', function() {
    document.getElementById('your-audio-id').play();
});

HTML5 音乐播放器外部播放按钮

HTML5 music player external play button

html

javascript

autoplay