使用 JQuery 自动播放音频并仅播放一次

Question

下面是音频播放器的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>audio.js</title>
    <script src="./audiojs/audio.min.js"></script>
    <link rel="stylesheet" href="./includes/index.css" media="screen">
    <script>
      audiojs.events.ready(function() {
        audiojs.createAll();
      });
    </script>
  </head>
  <body>
    <header>
      <h1>audio.js</h1>
    </header>

    <audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" preload="auto"></audio>


  </body>
</html>

有了这个，我想添加一些限制，比如不想显示播放 button.Instead 它会在 10 秒后自动播放，并且只能播放一次。我该怎么做。如果有人知道解决方案，请帮助我解决这个问题。参考。 https://kolber.github.io/audiojs/

Answer 1

您可以通过将 .play-pause 的样式更改为 display:none

来隐藏 play/pause 按钮

将autoplay设置为false以避免加载时播放并使用setTimeout在10秒后播放

参考以下代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>audio.js</title>
    <script src="./audiojs/audio.min.js"></script>
    <link rel="stylesheet" href="./includes/index.css" media="screen">
    <style>
        .play-pause {
            display: none;
        }

        .scrubber {
            display: none;
        }

        .audiojs {
            width: 110px;
        }

        .audiojs .time {
            border-left: none;
        }
    </style>
</head>

<body>
    <header>
        <h1>audio.js</h1>
    </header>

    <audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" id="player"></audio>
    <label id="audio_stats"></label>
    <script>
        var element = document.getElementById("player");
        var settings = {
            autoplay: false,
            loop: false,
            preload: true,
            swfLocation: 'audiojs/audiojs.swf',
            trackEnded: function (e) {
                document.getElementById("audio_stats").innerText = "Track Ended...";
            }
        }

        audiojs.events.ready(function () {
            var a = audiojs.create(element, settings);
            var count = 11;
            var counter = setInterval(timer, 1000);

            function timer() {
                count = count - 1;
                if (count <= 0) {
                    clearInterval(counter);
                    a.play();
                    document.getElementById("audio_stats").innerText = "Playing...";
                    return;
                }
                document.getElementById("audio_stats").innerText = "Will Start in " + count + " sec.";
            }
        });
    </script>
</body>
</html>

使用 JQuery 自动播放音频并仅播放一次

AutoPlay audio and play only once using JQuery

android

jquery

html5-audio

audio-streaming