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属性autoplay开始” 或任何JQuery解决方案 - 请JS。

更新：

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

解决方案

webSettings.setMediaPlaybackRequiresUserGesture(false);

做了魔术：）

Answer 1

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

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

请参阅DOMContentLoaded @ MDN。

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

1 个答案: