js 多个音频切换播放器,可以控制音量

曹え 5811 发布于:2017-09-06 14:42:21

blob.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>index</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link rel="stylesheet" href="css/cui.css" />
        <link rel="stylesheet" href="css/lib.css" />
        <link rel="stylesheet" href="css/audio.css" />
        <link rel="stylesheet" href="css/reset.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <!--[if IE]>
        <script src="js/html5.js"></script>
        <script src="js/respond.js"></script>
        <![endif]-->
    </head>
<body style="background-color:#f9f9f9;">
    <div class="viewport">
        <div class="slideshow">
            <div class="music-player"> 
                <div class="zj"></div>
                <div class="info">
                    <div class="center">
                        <div class="jp-playlist">
                            <ul>
                            <li></li>
                            </ul>
                        </div>
                    </div>
                    <div class="progress jp-seek-bar">
                        <span class="jp-play-bar" style="width: 0%"></span>
                        <div class="timer right" id="all-time">00:00</div>
                        <div class="timer left" id="now-time">00:00</div>
                    </div>
                </div>
                <div class="controls"> <br>
                    <div class="play-controls"> <a href="javascript:;" class="icon-previous jp-previous" title="previous"></a> <a href="javascript:;" class="icon-play jp-play" title="play"></a> <a href="javascript:;" class="icon-pause jp-pause" title="pause"></a> <a href="javascript:;" class="icon-next jp-next" title="next"></a> </div>
                    <div class="volume-level jp-volume-bar disblock"> 
                        <!-- <span class="jp-volume-bar-value disblock" style="width: 50%" ></span>  -->
                        <div id="volume"></div>
                        <a href="javascript:;" class="icon-volume-up jp-volume-max disblock" title="max volume" ></a> 
                        <a href="javascript:;" class="icon-volume-down jp-mute disblock" title="mute"></a>
                    </div>
                </div>
                <div id="jquery_jplayer" class="jp-jplayer"></div>
            </div>
        </div>
    </div>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/jquery.jplayer.min.js"></script> 
    <script src="js/jplayer.playlist.min.js"></script>
    <link rel="stylesheet" href="css/nouislider.css">
    <script src="js/nouislider.js"></script>
    <script>
        // 自定义音量控制条
        var slider = document.getElementById('volume');
        noUiSlider.create(slider, {
            start: [40],
            connect: [true, false],
            Step: 1,
            range: {
                'min': 0,
                'max': 100
            }
        });
        slider.noUiSlider.set()
        slider.noUiSlider.on('change', function(){
            $('audio')[0].volume = Math.floor(slider.noUiSlider.get() / 100);
        });
        // 音频
        $(document).ready(function(){
          var playlist = [
           {
            // 添加切换项目
            title:"1",
            artist:"",
            mp3:"mp3/1.mp3",
            poster: "images/1.jpg"
            },
           {
            // 添加切换项目
            title:"2",
            artist:"",
            mp3:"mp3/2.mp3",
            poster: "images/bg.jpeg"
            },
            {
            // 添加切换项目
            title:"3",
            artist:"",
            mp3:"mp3/3.mp3",
            poster: "images/1.jpg"
            },
            {
            // 添加切换项目
            title:"4",
            artist:"",
            mp3:"mp3/4.mp3",
            poster: "images/bg.jpeg"
            },
            {
            // 添加切换项目
            title:"5",
            artist:"",
            mp3:"mp3/5.mp3",
            poster: "images/1.jpg"
            }
            ];
        /*  {
              title:"Cro Magnon Man",
              artist:"The Stark Palace",
              mp3:"http://jq22.qiniudn.com/i2.mp3",
              poster: "http://33.media.tumblr.com/bf9dc125a47dcca91ce5b3575bc3ba92/tumblr_nbmb3j8nU51sq3g2zo1_500.png"
            },
            这个可以自己随便加了
            /mxlogo/web/fmbox/mp3/
            */
        var cssSelector = {
            jPlayer: "#jquery_jplayer",
            cssSelectorAncestor: ".music-player"
        };
        // 音频参数
        var options = {
            
            swfPath: "http://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",
            supplied: "ogv, m4v, oga, mp3"
        };
        var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

        var mp3 = document.getElementById('jp_audio_0');
            settime = setInterval(function(){
            alltime = $.jPlayer.convertTime(mp3.duration);
            nowtime = $.jPlayer.convertTime(mp3.currentTime);
            $('#all-time').text(alltime);
            $('#now-time').text(nowtime);
        },1000);


        });
    </script>
</body>
</html>

下载地址:


1504679454000.rar


觉得有用请点个赞吧!
0 530