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

debugcn 发表于 Dev

Kavya Shree

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

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

卡尔提凯扬·韦迪（Karthikeyan Vedi）

您可以通过将其样式更改为.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>