Question

我正在构建单页视差网站。页面的第一部分是一个徽标和一个文本按钮，上面写着＆＃34;立即收听＆＃34;

单击“立即收听”按钮时，页面会自动向下滚动到嵌入HTML5音乐播放的下一部分。有没有办法让音乐自动启动一次＆＃34;立即收听＆＃34;单击按钮？

这是我正在处理的页面的链接。我尝试添加事件监听器，但它似乎没有起作用。

http://rob.peytongregory.com/

Answer 1

我假设你已经为按钮绑定了一个点击事件，所以只需选择音频元素并调用.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音乐播放器外部播放按钮

2 个答案: