个人中心
gpt4 book ai didi

javascript - 带有 JQuery 音频的 HTML5 音频标签

转载 作者：行者123 更新时间：2023-11-28 20:58:12 25 4
gpt4 key购买 nike 

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#play-bt").click(function(){
                    $(".audio-player")[0].play();
                    $(".message").text("Music started");
                })

                $("#pause-bt").click(function(){
                    $("#audio-player")[0].pause();
                    $(".message").text("Music paused");
                })

                $("#stop-bt").click(function(){
                    $(".audio-player")[0].pause();
                    $(".audio-player")[0].currentTime = 0;
                    $(".message").text("Music Stopped");
                })
            })
        </script>
    </head>
    <body>

        <audio class ="audio-player" name="" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio>
        <audio class ="audio-player" name="" src="04-zedd-stars_come_out_(terravita_remix)" ></audio>

                <div class ="message"></div>
            <a id = "play-bt" href="#">Play music</a> | <a id ="pause-bt" href="#">Pause music</a> | <a id ="stop-bt" href="#">Stop music</a> 

    </body>
</html>

此代码仅播放第一个音频标签，我如何才能播放下一首歌曲/轨道/音频标签？

最佳答案

加载的所有音频元素都在一个数组中，您可以使用您拥有的方法访问该数组。如果添加下一个轨道功能，您可以浏览所有元素，如下所示:

$(document).ready(function(){

    var x = $(".audio-player").length; // Count total audio players
    var z = 0; // Start at first audio player

    $("#play-bt").click(function(){
        $(".audio-player")[z].play();
        $(".message").text("Music started");
    })
    $("#pause-bt").click(function(){
        $("#audio-player")[z].pause();
        $(".message").text("Music paused");
    })
    $("#stop-bt").click(function(){
        $(".audio-player")[z].pause();
        $(".audio-player")[z].currentTime = 0;
        $(".message").text("Music Stopped");
    })
    $("#next-bt").click(function(){
        $(".audio-player")[z].pause();
        z++;
        if (z >= x) z = 0;
        $(".audio-player")[z].play();
        $(".message").text("Track: "+z);
    })
})​

它使用 jquery .length 查找音频元素的数量，当您到达最后一个轨道时，它会从第一个轨道开始。这是一个示例 -> http://jsfiddle.net/8GycB/46/

关于javascript - 带有 JQuery 音频的 HTML5 音频标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11672059/

25 4 0
文章推荐： javascript - 遇到奇怪的 javascript 操作
文章推荐： google-app-engine - 如何在开发环境中测试后端实例的并发？
文章推荐： testing - Grails 测试 JMS 消息传递
文章推荐： javascript - jQuery 分割文本