Android WebView JS - 使用自定义功能在加载时自动启动音频

Question

我有一个用于音频标签的自定义 JS 函数。它还处理进度条。当我单击相关标签<a onclick="playSound(1)"> 时，它可以工作。 但是当我想在页面加载时启动它时，这个功能就不再起作用了。 我认为这可能是 EventListeners 的一个原因 - 但根据我的逻辑，我只将一个事件添加到时间线（进度条）。我不知道为什么它不触发音频文件！

这是我的功能：

    //Play and Pause
function playSound(id) {
    var param1 = "play" + id;
    var param2 = "audioFile" + id;
    var param3 = "timeline"+id;
    var param4 = "playhead"+id;
    var param5 = "timeNumbers"+id;

    var playBtn = document.getElementById(param1);
    var audioFile = document.getElementById(param2);
    var timeline = document.getElementById(param3);
    var playhead = document.getElementById(param4);
    var progressTime = document.getElementById(param5);

    // start music
    if (audioFile.paused) {
        audioFile.play();
        // remove play, add pause
        playBtn.innerHTML = '<img src="img/pause.svg" />';
        playBtn.className = "paused";
    } else { // pause music
        audioFile.pause();
        // remove pause, add play
        playBtn.innerHTML = '<img src="img/play.svg" />';
        playBtn.className = "playBtn";
    }

    //handle timeline
    var duration = audioFile.duration;
    var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

    audioFile.addEventListener("timeupdate", timeUpdate, false);
    // makes timeline clickable
    timeline.addEventListener("click", function (event) {
        moveplayhead(event);
        audioFile.currentTime = duration * clickPercent(event);
    }, false);

    function clickPercent(event) {
        return (event.clientX - getPosition(timeline)) / timelineWidth;
    }

    function moveplayhead(event) {
        var newMargLeft = event.clientX - getPosition(timeline);

        if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
            playhead.style.marginLeft = newMargLeft + "px";
        }
        if (newMargLeft < 0) {
            playhead.style.marginLeft = "0px";
        }
        if (newMargLeft > timelineWidth) {
            playhead.style.marginLeft = timelineWidth + "px";
        }
    }

正如我上面提到的，当我打电话给<a onclick"playSound(2)"> 时，它工作得很好。 但是当我在我的外部 JS 中执行 playSound(2). 时，它不会启动。 请不要建议“为什么不从 html 属性自动播放开始” 或任何 JQuery 解决方案 - 请只使用 JS。

更新：

由于它在 Android WebView 中使用，我找到了以下信息： 大多数移动平台（Android、iOS）上的自动播放被阻止以避免糟糕的用户体验。

解决方案

webSettings.setMediaPlaybackRequiresUserGesture(false);

做了魔法:)

Answer 1

在启动playsound() 函数之前，您必须确保所有 DOM 内容都已加载。像下面这样的东西可以解决这个问题......

document.addEventListener('DOMContentLoaded', function() {
    playsound(2);
}, false);

见DOMContentLoaded @ MDN。