音频日历模块

一、音频日历模块

这个案例是本人实际开发时所写

开发要求：

1. 通过日历模块控制音频模块
2. 点击某天时修改音频及音频模块标题

由于一些问题，暂无法获取数据，但大部分功能均已实现

线上可去 cctv国际在线->土耳其首页底部 ->点击收音机更多

线上案例与以下代码出入削大~不过原理差不多。

HTML:

<div class="right-content">
    <div class="radio-wrap">
        <div class="radio-box">
            <div>
                <div class="aPlayer" audiosrc="../土耳其音频/音乐播放器/Mojito.mp3" id="audio_player" style="width: 0px; height: 0px;"> </div>
                <div class="title">
                    <span class="fl">Radyo</span>
                    <i class="fl"></i>
                    <div class="clear"></div>
                </div>
                <div class="line"></div>
                <div class="control jp-voice">
                    <div class="jp-controls">
                        <div class="jp-play" style="display: block;"></div>
                        <div class="jp-pasue" style="display: none;"></div>
                    </div>
                    <div class="jp-progress fl">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar bar playBar">
                                <div class="jp-play-bas"></div>
                            </div>
                        </div>
                    </div>
                    <div class="time">
                        <div class="jp-current-time current-time fl">00:00:00</div>
                        <div class="fl">/</div>
                        <div class="jp-duration duration fl">00:00:00</div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="jp-volume-controls">
                    <button class="jp-mute" role="button" tabindex="0" style="display: block;">mute</button>
                    <button class="jp-unmute" role="button" tabindex="0" style="display: none;">unmute</button>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="calendar" class="calendar">
        <div class="calendar-title">
            <div class="arrow">
                <span class="arrow-prev">&lt;&lt;</span>
                <a href="#" class="title"></a>
                <span class="arrow-next">&gt;&gt;</span>
            </div>
        </div>
        <ul class="calendar-week">
            <li class="item">Paz</li>
            <li class="item">Pzt</li>
            <li class="item">Sal</li>
            <li class="item">Çar</li>
            <li class="item">Per</li>
            <li class="item">Cum</li>
            <li class="item">Cmt</li>
        </ul>

        <ul class="calendar-date">

        </ul>
    </div>
</div>

CSS:

<style>
    * {
        box-sizing: content-box;
    }
    
    .clear {
        *zoom: 1;
    }
    
    .clear:after {
        content: '·';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    
    /* 收音机背景 */
    
    .radio-box {
        margin: 0 auto;
        position: relative;
        width: 385px;
        height: 130px;
        background-image: url(../土耳其音频/音乐播放器/audio_background.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .radio-box .title {
        padding-top: 20px;
        padding-bottom: 12px;
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    .radio-box>div {
        width: 346px;
        margin: 0 auto;
    }
    /* 标题样式 */
    
    .radio-box .title span {
        font-size: 18px;
        font-weight: 600;
        display: block;
        line-height: 24px;
    }
    /* 标题旁边图标 */
    
    .radio-box .title i {
        display: block;
        background: url(../土耳其音频/音乐播放器/audio_icon.png) no-repeat center;
        width: 26px;
        height: 22px;
        margin-left: 10px;
    }
    /* 收音机中部横线 */
    
    .radio-box .line {
        height: 3px;
        background: url(../土耳其音频/音乐播放器/audio_radio-line.png) no-repeat center;
    }
    /* 收音机暂停按钮 */
    
    .radio-box .jp-play {
        background: url(../土耳其音频/音乐播放器/audio_timeout.png) no-repeat center;
        width: 60px;
        height: 60px;
    }
    /* 收音机播放按钮 */
    
    .radio-box .jp-pasue {
        background: url(../../土耳其页面/土耳其音频/音乐播放器/audio_start.png) no-repeat center;
        width: 60px;
        height: 60px;
    }
    /* 控制静音与否 */
    
    .radio-box .jp-volume-controls {
        position: absolute;
        top: 26px;
        right: 102px;
    }
    
    .radio-box .jp-volume-controls button {
        width: 15px;
        height: 15px;
        position: absolute;
        overflow: hidden;
        text-indent: -9999px;
        border: none;
        cursor: pointer;
    }
    
    .radio-box .jp-volume-controls .jp-mute {
        background-image: url(../土耳其音频/音乐播放器/audio_turnoffmute.png);
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: 18px 15px;
    }
    
    .radio-box .jp-volume-controls .jp-unmute {
        background-image: url(../土耳其音频/音乐播放器/audio_mute.png);
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: 12px 15px;
    }
    
    .radio-box .jp-volume-controls .jp-volume-bar {
        position: absolute;
        overflow: hidden;
        background: #e4edff;
        border-radius: 2px;
        border: solid 1px #e8e8e8;
        top: 6px;
        left: 20px;
        width: 60px;
        height: 5px;
        cursor: pointer;
    }
    
    .radio-box .jp-volume-controls .jp-volume-bar .jp-volume-bar-value {
        background: #f26d6e;
        width: 0;
        height: 5px;
        border-radius: 2px;
    }
    
    .jp-voice {
        position: relative;
    }
    
    .jp-progress {
        position: absolute;
        top: 30px;
        left: 70px;
        cursor: pointer;
        width: 140px;
        height: 6px;
        border-radius: 6px;
        background-color: #a5a9ad;
    }
    
    .jp-progress .jp-seek-bar {
        overflow: hidden;
    }
    
    .jp-progress .jp-play-bar {
        width: 0%;
        height: 6px;
        border-radius: 6px;
        background-color: red;
    }
    
    .jp-progress .jp-play-bas {
        display: block;
        position: absolute;
        top: -5px;
        cursor: pointer;
        width: 6px;
        height: 16px;
        background-image: url(../土耳其音频/音乐播放器/audio_progress.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    
    .jp-voice .time {
        position: absolute;
        top: -2px;
        right: 0;
        font-size: 12px;
        margin-top: 26px;
    }
    
    .container {
        width: 768px;
        height: 486px;
        border: 1px solid #ccc;
        background-color: #f8f8f8;
        overflow: auto;
    }
    
    .container p i {
        display: inline-block;
        width: 12px;
        height: 24px;
    }
    
    .container p {
        line-height: 40px;
        padding: 10px;
        font-size: 24px;
    }
    
    .left-content .title-wrap {
        margin-bottom: 43px;
    }
    
    .calendar {
        margin: 0 auto;
        width: 380px;
        padding-bottom: 10px;
        background-color: #fff;
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
    }
    
    .calendar-title {
        position: relative;
        height: 20px;
        line-height: 40px;
        padding: 6px 0 20px;
        background: #f26d6e;
        padding-top: 18px;
    }
    
    .calendar-title a.title {
        display: inline-block;
        font-size: 26px;
        padding: 0 25px;
        text-decoration: none;
        color: #fff;
    }
    
    #backToday {
        position: absolute;
        left: 70%;
        top: 8px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        background-color: rgb(255, 128, 142);
        font-size: 18px;
    }
    
    .calendar-title .arrow {
        position: absolute;
        top: 10px;
        left: 50%;
        width: 250px;
        margin-left: -125px;
        text-align: center;
    }
    
    .calendar-title .arrow span {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    
    .calendar-title .arrow span:hover {
        color: #888;
    }
    
    .calendar-week {
        font-weight: 600;
        font-size: 16px;
        margin-left: 8px;
    }
    
    .calendar-week,
    .calendar-date {
        overflow: hidden;
        margin-left: 12px;
        padding-left: 0;
    }
    
    .calendar-week .item,
    .calendar-date .item {
        float: left;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #4e4e4e;
        list-style-type: none;
    }
    
    .calendar-date .item {
        border-radius: 50%;
        cursor: pointer;
        font-size: 16px;
        color: #ccc;
    }
    
    .calendar-date .item:hover,
    .calendar-date .item-curMonth:hover {
        background-color: #f0f0f0;
    }
    
    .calendar-date .item-curMonth {
        color: #999999;
        font-weight: 600;
    }
    
    .calendar-date .item-curDay,
    .calendar-date .item-curDay:hover {
        color: #fff;
        background-color: #ff5a6d;
    }
    
    .calendar-date .item-selected,
    .calendar-date .item-selected:hover {
        color: #fff;
        background: #ff808e;
    }
    
    .calendar-today {
        display: none;
        position: absolute;
        right: 20px;
        top: 20px;
        width: 90px;
        height: 48px;
        padding: 6px 10px;
        background-color: rgb(255, 128, 142);
        border-radius: 5px;
    }
    
    .calendar-today .triangle {
        position: absolute;
        top: 50%;
        left: -16px;
        margin-top: -8px;
        border-width: 8px;
        border-style: solid;
        border-color: transparent rgb(255, 128, 142) transparent transparent;
    }
    
    .calendar-today p {
        color: #fff;
        font-size: 14px;
        line-height: 24px;
    }
    
    .rotaion_list {
        width: 520px;
        height: 390px;
        overflow: hidden;
    }
    
    .calendar-date ._item,
    .calendar-date ._item:hover {
        background: #fff!important;
        cursor: auto;
    }
    
    #calendar {
        margin-top: 36px;
        box-shadow: 0px 0px 3px 3px rgba(138, 138, 139, 0.2);
    }
    
    #calendar .calendar-date a {
        display: block;
    }
    
    html,
    body {
        height: 100%;
    }
</style>

JS:

<script src="../土耳其音频/JQuery-3.6.0/jquery-3.6.0.min.js"></script>
<!-- 播放器控制 -->
<script>
    var mp3_Url = $(".aPlayer").attr("audiosrc"); // 获取 MP3url
    var Audio_Box = new Audio(mp3_Url); // 创建音频
    var audio_length; // 总时长
    var audio_currentlength; // 当前时长

    // 时间处理函数
    function timeFormat(time) {
        var h = Math.floor(time / 3600) < 10 ? '0' + Math.floor(time / 3600) : Math.floor(time / 3600);
        var m = Math.floor((time / 60 % 60)) < 10 ? '0' + Math.floor((time / 60 % 60)) : Math.floor((time / 60 % 60));
        var s = Math.floor((time % 60)) < 10 ? '0' + Math.floor((time % 60)) : Math.floor((time % 60));
        var timeformat = h + ":" + m + ":" + s;
        return timeformat;
    }

    // 获取起始时间以及结尾时间
    function getCurTime(curt) {
        // 当前时间
        var audio_currentTime = timeFormat(curt);
        $(".current-time").text(audio_currentTime);
    }
    getCurTime(Audio_Box.currentTime);
    Audio_Box.ondurationchange = function getTimeLength() {
        // 总的时间
        audio_length = Audio_Box.duration;
        audio_currentlength = Audio_Box.currentTime
        var audio_lengths = timeFormat(audio_length);
        $(".duration").text(audio_lengths);
    }

    // 播放
    $(".jp-controls .jp-play").click(function(e) {
        e.preventDefault();
        Audio_Box.play();
        $(".jp-play").hide();
        $(".jp-pasue").show();
        // 进度时间及进度条
        progresstimer = setInterval(function() {
            // 获取进度条
            var play_Bar_Num = (Audio_Box.currentTime * 100 / audio_length) + "%";
            $(".playBar").width(play_Bar_Num);
            $(".jp-play-bas").css('left', play_Bar_Num);
            // 进度条
            getCurTime(Audio_Box.currentTime);
        }, 100)
    });

    // 暂停
    $(".jp-controls .jp-pasue").click(function(e) {
        e.preventDefault();
        clearInterval(progresstimer);
        Audio_Box.pause();
        $(".jp-pasue").hide();
        $(".jp-play").show();
    });

    // 静音
    $(".jp-volume-controls .jp-mute").click(function(e) {
        e.preventDefault();
        Audio_Box.muted = true;
        $(".jp-mute").hide();
        $(".jp-unmute").show();
    });

    // 开启声音
    $(".jp-volume-controls .jp-unmute").click(function(e) {
        e.preventDefault();
        Audio_Box.muted = false;
        $(".jp-unmute").hide();
        $(".jp-mute").show();
    });

    // 音量进度条
    function getVolumeBar(val) {
        var width_Val = (val.toFixed(1) * 100) + '%';
        $(".jp-volume-bar-value").css({
            'width': width_Val,
            'transition': '0.5s'
        });
    };

    getVolumeBar(1)

    // 控制音量
    $(".jp-volume-bar").mousedown(function() {
        // 鼠标点击位置
        var x = event.clientX;
        // 音量条到文档的距离
        var num = $(".jp-volume-bar").offset().left;
        var volume_Num = (x - num) / 60;
        getVolumeBar(volume_Num);
        // 音量
        Audio_Box.volume = volume_Num.toFixed(1);
    });

    function getprogresscss(val) {
        var width_Val = (val.toFixed(2) * 100) + '%'
        $(".playBar").css({
            'width': width_Val,
            'transition': '0.5s'
        });
        $(".jp-play-bas").css({
            'left': width_Val,
            'transition': '0.5s'
        });
    };

    // 进度条
    $(".jp-progress").mousedown(function() {
        // 鼠标点击位置
        var progress_X = event.clientX;
        // 音量条到文档的距离
        var progress_Left = $(".jp-progress").offset().left;
        // 进度条前进数值
        var progress_Num = (progress_X - progress_Left) / 140;
        var cur_Times = progress_Num.toFixed(2) * audio_length; // 点击获得的时间
        Audio_Box.currentTime = cur_Times
        getprogresscss(progress_Num)

    })
</script>

<!-- 日历 -->
<script>
    /*
     * 用于记录日期，显示的时候，根据dateObj中的日期的年月显示
     */
    var dateObj = (function() {
        // 默认为当前系统时间
        var now_date = new Date();
        return {
            getDate: function() {
                return now_date;
            },
            setDate: function(date) {
                now_date = date;
            }
        };
    })();

    showCalendarData();

    /**
     * 表格中显示数据，并设置类名
     */
    function showCalendarData() {
        // 所有天数
        var all_days = 0;
        $(".calendar-date").empty();
        var year = dateObj.getDate().getFullYear(); // 获取年份
        var month = dateObj.getDate().getMonth() + 1; // 获取月份
        var dateStr = getDateStr(dateObj.getDate()); // 获取日期字符串
        // console.log(dateStr) // 20220323

        //得到每个月多少天
        switch (month) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                all_days = 31
                break;
            case 4:
            case 6:
            case 9:
            case 11:
                all_days = 30
                break;
            default:
                //判断闰年 得到二月份的天数
                if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
                    all_days = 29
                } else {
                    all_days = 28
                }

                break;
        }

        // 设置标题栏中的的 年/月
        var calendar_Title = $(".calendar .title")
        var titleStr = dateStr.substr(0, 4) + "/" + dateStr.substr(4, 2);
        calendar_Title.html(titleStr)

        // 获取当前月有多少天，生成相应个数的li
        //获取当前月份有多少天 生成相应个数的li
        renderHtml(all_days);

        var firstDay = new Date(year, month - 1, 1);
        $(".calendar-date .item").each(function(i) {
            // 获取当月所有天数
            var allDay = new Date(year, month - 1, i + 2 - firstDay.getDate());
            var allDay_Str = getDateStr(allDay);
            // console.log(allDay_Str)
            $(this).html(allDay.getDate()).attr('data', allDay_Str);
            // console.log(allDay.getDate())
            if (getDateStr(new Date()) === allDay_Str) {
                $(this).attr('class', 'item item-curDay');
            } else if (getDateStr(firstDay).substr(0, 6) === allDay_Str.substr(0, 6)) {
                $(this).attr('class', 'item item-curMonth');
            } else {
                $(this).attr('class', '_item item')
            }
        });

        // 今日及以后添加class
        $("#calendar .calendar-date .item").each(function() {
            if (Math.floor(getNowFormatDate()) < Math.floor($(this).attr('data'))) {
                $(this).addClass('noData')
            }
        })

        var firstDayWeek = new Date(year, month - 1, 1).getDay(); // 获取当前月的第一天是周几
        renderHtmlPrev(firstDayWeek);
        // console.log(firstDay)
        clickDay()
    }

    // 上一月
    $(".arrow-prev").click(function() {
        // 获取当前日期
        var now_date = dateObj.getDate();
        dateObj.setDate(new Date(now_date.getFullYear(), now_date.getMonth() - 1, 1))
        showCalendarData()
    });

    // 下一月
    $(".arrow-next").click(function() {
        // 获取当前日期
        var now_date = dateObj.getDate();
        dateObj.setDate(new Date(now_date.getFullYear(), now_date.getMonth() + 1, 1))
        showCalendarData()
    });

    // 点击天
    function clickDay() {
        $(".calendar-date .item").click(function() {
            if (!$(this).hasClass("_item")) {
                var data_Str = $(this).attr('data'); // 获取点击 li 中的时间
                var date = changingStr(addMark(data_Str));
                // console.log(date); Date Tue Mar 01 2022 00:00:00 GMT+0800 (中国标准时间)
                audioTitle(date.getDay());
                // 获取点击的 li 
                var $curClick = $(".calendar-date").find('[data=' + data_Str + ']');
                // dateObj.setDate(new Date(date.getFullYear(), date.getMonth(), 1));
                if (!$(this).hasClass('item-curMonth')) {
                    showCalendar();
                }
                // 判断是否有 item-selected
                if (!$curClick.hasClass('item-selected')) {
                    $(".calendar-date .item").removeClass('item-selected');
                    $curClick.addClass('item-selected');
                }

                var nowDate = $("#calendar .calendar-date .item-curDay").attr("data");

                if (Math.floor(data_Str) < Math.floor(nowDate)) {
                    // console.log('noData');
                } else if (Math.floor(data_Str) > Math.floor(nowDate)) {
                    $(".calendar-date .item").removeClass('item-selected');

                } else if (Math.floor(data_Str) == Math.floor(nowDate)) {
                    // console.log('noData');
                }
            }
        });
    }

    /*
     * 渲染日期
     */
    function renderHtml(allday) {
        // 日期列表
        var dar_Str = '';
        // 一个月最多31天，所以一个月最多占6行表格 ps:li中数字测试用
        for (var i = 1; i <= allday; i++) {
            dar_Str += '<li class="item">' + i + '</li>';
        };
        $(".calendar-date").html(dar_Str)
    }

    /*
     * 渲染日期前方空格
     */
    function renderHtmlPrev(firstprev) {
        var prevdar_Str = '';
        for (var i = 0; i < firstprev; i++) {
            prevdar_Str += '<li class="_item item"></li>'
        }
        $(".calendar-date").prepend(prevdar_Str)
    }
    /**
     * 日期转化为字符串， 4位年+2位月+2位日 ps:20220323
     */
    function getDateStr(date) {
        var _year = date.getFullYear();
        var _month = date.getMonth() + 1; // 月从0开始计数
        var _d = date.getDate();

        _month = (_month > 9) ? ("" + _month) : ("0" + _month);
        _d = (_d > 9) ? ("" + _d) : ("0" + _d);
        return _year + _month + _d;
    }

    /**
     * 日期转化为字符串,获取前一日日期 4位年+2位月+2位日 ps:20220322
     */
    function getNowFormatDate() {
        var date = new Date();
        var _year = date.getFullYear();
        var _month = date.getMonth() + 1; // 月从0开始计数
        var _d = date.getDate() - 1;

        _month = (_month > 9) ? ("" + _month) : ("0" + _month);
        _d = (_d > 9) ? ("" + _d) : ("0" + _d);
        var current_Date = _year + _month + _d;
        // console.log(current_Date)
        return current_Date;
    }

    /**
     * 字符串转日期
     */
    function changingStr(dataStr) {
        var fullDate = dataStr.split("-");
        return new Date(fullDate[0], fullDate[1] - 1, fullDate[2]);
    };

    /**
     * 给传进来的日期字符串加-
     */
    function addMark(date) {
        return date.substr(0, 4) + '-' + date.substr(4, 2) + '-' + date.substring(6);
    };

    /**
     * 收音机标题
     */
    function audioTitle(thisweek) {
        var _weekStr = '';
        switch (thisweek) {
            case 0:
                _weekStr = 'Pazar';
                break;
            case 1:
                _weekStr = 'Pazartesi';
                break;
            case 2:
                _weekStr = 'Salı';
                break;
            case 3:
                _weekStr = 'Çarşamba';
                break;
            case 4:
                _weekStr = 'Perşembe';
                break;
            case 5:
                _weekStr = 'Cuma';
                break;
            case 6:
                _weekStr = 'Cumartesi';
                break;
        }

        $('.radio-wrap .title span').html(_weekStr);
    }
</script>