使用 JQuery 控制单个页面中的多个音频访问

Question

大家好，

这是我的音频的示例代码play.It 将缓冲并在 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;
            }
           .audiojs {
                width: 100%;
            }

        </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 = "Completed...";
                }
            }

            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>

这是参考 https://kolber.github.io/audiojs/ 在我的站点中，我有将近 17 个音频。每个 div 附有单个音频。第一个 div 的音频 ID 为 "player(means 1st audio)" 同样在第二个 div "player1(means 2nd audio)" 音频将是 there.for 第一个 div 我将有一个按钮 "next question" 同样，所有 17 个 div 都会有上一个和下一个 button.What 问题是所有 17 个音频都被缓冲并同时播放相反 "player(means 1st audio)" 将在页面 opened.And 当我点击下一个按钮时第二个音频应该开始 buffer.And 如果我按上一个按钮 "player(means 1st audio)" 不应该再次播放因为只有一次它应该 play.Similarly 它对所有人都有效 audio.If 任何人给我这个 Issue.It 的解决方案将会更加 helpful.Im 在这个问题上挣扎 longtime.Please 提前帮助我 anyone.Thanks。

Answer 1

检查下面的代码是否符合您的要求。

<!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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <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>
    <br/>
    <button id="next" disabled>Next</button>

    <ol style="display:none;">
        <li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">dead wrong intro</a></li>
        <li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a></li>
        <li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li>
        <li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/04-islands-is-the-limit.mp3">islands is the limit</a></li>
        <li class=""><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/05-one-more-chance-for-a-heart-to-skip-a-beat.mp3">one more chance for a heart to skip a beat</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3">suicidal fantasy</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/07-everyday-shelter.mp3">everyday shelter</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/08-basic-hypnosis.mp3">basic hypnosis</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li>
    </ol>

    <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...";
                var next = $('ol li.playing').next();
                if (!next.length) next = $('ol li').first();
                next.addClass('playing').siblings().removeClass('playing');
                audio.load($('a', next).attr('data-src'));
                audio.play();
            }
        }

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

            function timer() {
                count = count - 1;
                if (count <= 0) {
                    clearInterval(counter);
                    audio.play();
                    document.getElementById("audio_stats").innerText = "Playing..." + audio.mp3;
                    $('#next').removeAttr('disabled');
                    return;
                }
                document.getElementById("audio_stats").innerText = "Will Start in " + count + " sec.";
            }

            // Load in the first track
            var audio = a[0];
            first = $('ol a').attr('data-src');
            $('ol li').first().addClass('playing');
            audio.load(first);

            // Load in a track on click
            $('ol li').click(function(e) {
                e.preventDefault();
                $(this).addClass('playing').siblings().removeClass('playing');
                audio.load($('a', this).attr('data-src'));
                audio.play();
            });
            // Keyboard shortcuts
            $(document).keydown(function(e) {
                var unicode = e.charCode ? e.charCode : e.keyCode;
                // right arrow
                if (unicode == 39) {
                    var next = $('li.playing').next();
                    if (!next.length) next = $('ol li').first();
                    next.click();
                    // back arrow
                } else if (unicode == 37) {
                    //var prev = $('li.playing').prev();
                    //if (!prev.length) prev = $('ol li').last();
                    //prev.click();
                    // spacebar
                } else if (unicode == 32) {
                    //audio.playPause();
                }
            });

            $("#next").click(function() {
                var next = $('li.playing').next();
                if (!next.length) next = $('ol li').first();
                next.click();
                document.getElementById("audio_stats").innerText = "Playing..." + audio.mp3;
            });

        });
    </script>
</body>

</html>

使用 JQuery 控制单个页面中的多个音频访问

Control Multiple Audio Access in Single Page using JQuery

javascript

audio

jquery

audiojs