javascript - 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 .