audio标签播放两个视频，同时控制

leos~~
已于 2022-12-28 22:36:27 修改
阅读量263
点赞数
文章标签：音视频 css css3
于 2022-12-28 22:32:41 首次发布
本文链接：https://blog.csdn.net/tt22761/article/details/128474940
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #play,
    #paused {
        width: 200px;
        height: 80px;
        font-size: 30px;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 导航 */
    .nav {
        padding-top: 50px;
        display: flex;
        justify-content: center;
    }

    .nav .list {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px;
    }

    .nav .active {
        border: 1px solid red;
    }

    .play-content {
        cursor: pointer;
    }

    .play-content img {
        display: none;
    }

    .play-content img:first-child {
        display: inline-block;
    }
</style>

<body>

    <div class="container">
        <div style="padding-top: 50px;">
            <audio id="audio_0" src="" controls></audio>
            <input type="range" id="range_0" value="100">
        </div>
        <div style="padding-top: 50px;">
            <audio id="audio_1" src="" controls></audio>
            <input type="range" id="range_1" value="100">
        </div>
        <div style="padding-top: 50px;">
            <button id="play">播放</button>
        </div>
        <div style="padding-top: 50px;">
            <button id="paused">暂停</button>
        </div>
    </div>


    <!-- 导航栏切换 -->
    <!-- https://images.media.io/img2022/vocal-remover/play.png -->
    <div class="nav">
        <div class="list">
            <div class="play-content">
                <img src="https://images.media.io/img2022/vocal-remover/pause.png" class="pause" alt="">
                <img src="https://images.media.io/img2022/vocal-remover/play.png" class="play" alt="">
            </div>
        </div>
        <div class="list">
            <div class="play-content">
                <img src="https://images.media.io/img2022/vocal-remover/pause.png" class="pause" alt="">
                <img src="https://images.media.io/img2022/vocal-remover/play.png" class="play" alt="">
            </div>
        </div>
        <div class="list">
            <div class="play-content">
                <img src="https://images.media.io/img2022/vocal-remover/pause.png" class="pause" alt="">
                <img src="https://images.media.io/img2022/vocal-remover/play.png" class="play" alt="">
            </div>
        </div>
        <div class="list">
            <div class="play-content">
                <img src="https://images.media.io/img2022/vocal-remover/pause.png" class="pause" alt="">
                <img src="https://images.media.io/img2022/vocal-remover/play.png" class="play" alt="">
            </div>
        </div>

    </div>


</body>

</html>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>









<script>
    var audio_0 = document.getElementById("audio_0");
    var audio_1 = document.getElementById("audio_1");


    //点击播放
    $('#play').click(function () {
        audio_0.play();    //播放 
        audio_1.play();    //播放 
    });

    $('#paused').click(function () {
        audio_0.pause();   //暂停 
        audio_1.pause();    //暂停
    });



    //调节音量大小1
    $('#range_0').change(function () {
        var my = $('#range_0').val() / 100;//定义滑块的valu为并除以一百,因为音量的范围是0-1
        audio_0.volume = my;//过得audio的音量,并改变,
    });
    $('#range_1').change(function () {
        var my = $('#range_1').val() / 100;//定义滑块的valu为并除以一百,因为音量的范围是0-1
        audio_1.volume = my;//过得audio的音量,并改变,
    });
</script>








<script>



    function play() {
        audio_0.play();    //播放 
        audio_1.play();    //播放 
    }

    function pause() {
        audio_0.pause();   //暂停 
        audio_1.pause();    //暂停
    }

    function switchSrc(obj, index) {
        $(audio_0).attr('src', obj.a);
        $(audio_1).attr('src', obj.b);



        $(audio_0).bind('ended', function () {
            // alert('结束');

            $('.nav .list').eq(index).children('.play-content').children('.pause').css('display', 'inline-block');
            $('.nav .list').eq(index).children('.play-content').children('.play').css('display', 'none');
        })



    }





    var arr = [{
        a: 'https://wae.wondershare.cc/ccapi/cc_6239649b646ec.wav',
        b: 'https://wae.wondershare.cc/ccapi/cc_623964ab4a49f.wav'
    },
    {
        a: 'https://wae.wondershare.cc/ccapi/cc_6239649b646ec.wav',
        b: 'https://wae.wondershare.cc/ccapi/cc_623964ab4a49f.wav'
    },
    {
        a: 'https://wae.wondershare.cc/ccapi/cc_6239649b646ec.wav',
        b: 'https://wae.wondershare.cc/ccapi/cc_623964ab4a49f.wav'
    }, {
        a: 'https://wae.wondershare.cc/ccapi/cc_6239649b646ec.wav',
        b: 'https://wae.wondershare.cc/ccapi/cc_623964ab4a49f.wav'
    }]





    $('.nav .list').click(function () {


        if ($(this).hasClass('active')) {
            if ($(this).children('.play-content').children('.play').css('display') == "inline-block") {//判断当前如果是播放状态，则去暂停样式
                $(this).children('.play-content').children('.pause').css('display', 'inline-block');
                $(this).children('.play-content').children('.play').css('display', 'none');
                console.log('现在去暂停');

                // 写暂停逻辑即可
                pause();

            } else {//反之如有是暂停状态，则去播放
                $(this).children('.play-content').children('.pause').css('display', 'none');
                $(this).children('.play-content').children('.play').css('display', 'inline-block');
                console.log('现在去播放');

                //写播放逻辑即可
                play();
            }

        } else {

            //点击的是新的。则需要切换audio src链接



            switchSrc(arr[$(this).index()], $(this).index());
            play();



            //点击哪一列，则哪一列进行选中
            $(this).addClass('active').siblings().removeClass('active');
            //选中状态则为播放样式
            $(this).children('.play-content').children('.pause').css('display', 'none');
            $(this).children('.play-content').children('.play').css('display', 'inline-block');
            //其他兄弟级则为为暂停样式
            $(this).siblings().children('.play-content').children('.pause').css('display', 'inline-block');
            $(this).siblings().children('.play-content').children('.play').css('display', 'none');



        }





    });





</script>