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

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

<!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>

有了这个，我想添加一些约束，例如不想显示播放按钮。相反，它将在 10 秒后自动播放，并且只能播放一次。我该怎么做。如果有人知道解决方案，请帮助我摆脱这个问题。参考。https://kolber.github.io/audiojs/

您可以通过

将其.play-pause样式更改为display:none来隐藏播放/暂停按钮

将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>

相关内容

最新更新

热门标签：