<commit_before><!--
作业 4
实现单曲循环播放
    0, audio 标签有一个 ended 事件, 会在播放结束后触发
        用这个事件实现播放结束自动播放当前这首
        (注意, 这里并不是使用 loop 属性实现的)
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Fe 6 Lesson 11 Task 3</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <div class="audio-player-container">
        <audio id="id-audio-player" src="1.mp3" controls>您的浏览器不支持 audio 标签。</audio>
    </div>
    <div class="audio-player-buttons-container">
        <button id="id-audio-player-button-play" class="fa fa-play"></button>&nbsp;
        <button id="id-audio-player-button-pause" class="fa fa-pause"></button>
    </div>
    <div class="audio-player-info-container">
        <p>
            <span id="id-current-at">0:00</span>&nbsp;/
            <span id="id-track-duration"></span>
        </p>
    </div>
    <div class="audio-player-track-list-container">
        <div class="track" data-path="1.mp3"></div>
        <div class="track" data-path="2.mp3"></div>
        <div class="track" data-path="3.mp3"></div>
    </div>
    <p>已开启自动循环播放</p>
    <script>
    var log = console.log.bind(log)

    var e = function(selector) {
        var element = document.querySelector(selector)
        if (element == null) {
            var s = `元素没找到，选择器 ${selector} 没有找到或者 js 没有放在 body 里`
            alert(s)
        } else {
            return element
        }
    }

    var es = function(selector) {
        var elements = document.querySelectorAll(selector)
        if (elements.length == 0) {
            var s = `元素没找到，选择器 ${selector} 没有找到或者 js 没有放在 body 里`
            alert(s)
        } else {
            return elements
        }
    }

    var bindEvent = function(element, eventName, callback) {
        element.addEventListener(eventName, callback)
    }

    var bindBtnPlay = function(audioplayer) {
        var btn = e('#id-audio-player-button-play')
        bindEvent(btn, 'click', function() {
            audioplayer.play()
            log("播放")
        })
    }

    var bindBtnPause = function(audioplayer) {
        var btn = e('#id-audio-player-button-pause')
        bindEvent(btn, 'click', function() {
            audioplayer.pause()
            log("暂停")
        })
    }

    var formatSec = function(s) {
        var sec = Math.floor(s)
        return (sec - (sec %= 60)) / 60 + (9 < sec ? ':' : ':0') + sec
    }

    var showTrackCurrentTime = function(audioplayer) {
        bindEvent(audioplayer, 'canplay', function() {
            var interval = 1000
            var clockId = setInterval(function() {
                // 每 1s 都会调用这个函数
                var span = e('#id-current-at')
                span.innerHTML = formatSec(audioplayer.currentTime)
            }, interval)
        })
    }

    var showTrackDuration = function(audioplayer) {
        bindEvent(audioplayer, 'canplay', function() {
            var dur = audioplayer.duration
            var span = e('#id-track-duration')
            span.innerHTML = formatSec(dur)
        })
    }

    var showTrackList = function() {
        var tracks = es('.track')
        for (var i = 0; i < tracks.length; i++) {
            var path = tracks[i].dataset.path
            tracks[i].innerHTML = path
        }
    }

    var bindTrackPlay = function(audioplayer) {
        var tracks = es('.track')
        for (var i = 0; i < tracks.length; i++) {
            bindEvent(tracks[i], 'click', function(event) {
                var self = event.target
                audioplayer.src = self.dataset.path
                bindEvent(audioplayer, 'canplay', function() {
                    audioplayer.play()
                })
            })
        }
    }

    var bindTrackLoop = function(audioplayer) {
        bindEvent(audioplayer, 'ended', function() {
            log("已开启自动循环播放")
            audioplayer.play()
        })
    }

    var bindAudioPlayer = function() {
        var audioPlayer = e('#id-audio-player')
        bindBtnPlay(audioPlayer)
        bindBtnPause(audioPlayer)
        showTrackCurrentTime(audioPlayer)
        showTrackDuration(audioPlayer)
        showTrackList()
        bindTrackPlay(audioPlayer)
        bindTrackLoop(audioPlayer)
    }<commit_msg>在作业3基础上增加单曲循环播放功能<commit_after><!--
作业 4
实现单曲循环播放
    0, audio 标签有一个 ended 事件, 会在播放结束后触发
        用这个事件实现播放结束自动播放当前这首
        (注意, 这里并不是使用 loop 属性实现的)
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Fe 6 Lesson 11 Task 3</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <div class="audio-player-container">
        <audio id="id-audio-player" src="1.mp3" controls>您的浏览器不支持 audio 标签。</audio>
    </div>
    <div class="audio-player-buttons-container">
        <button id="id-audio-player-button-play" class="fa fa-play"></button>&nbsp;
        <button id="id-audio-player-button-pause" class="fa fa-pause"></button>
    </div>
    <div class="audio-player-info-container">
        <p>
            <span id="id-current-at">0:00</span>&nbsp;/
            <span id="id-track-duration"></span>
        </p>
    </div>
    <div class="audio-player-track-list-container">
        <div class="track" data-path="1.mp3"></div>
        <div class="track" data-path="2.mp3"></div>
        <div class="track" data-path="3.mp3"></div>
    </div>
    <p>已开启自动循环播放</p>
    <script>
    var log = console.log.bind(log)

    var e = function(selector) {
        var element = document.querySelector(selector)
        if (element == null) {
            var s = `元素没找到，选择器 ${selector} 没有找到或者 js 没有放在 body 里`
            alert(s)
        } else {
            return element
        }
    }

    var es = function(selector) {
        var elements = document.querySelectorAll(selector)
        if (elements.length == 0) {
            var s = `元素没找到，选择器 ${selector} 没有找到或者 js 没有放在 body 里`
            alert(s)
        } else {
            return elements
        }
    }

    var bindEvent = function(element, eventName, callback) {
        element.addEventListener(eventName, callback)
    }

    var bindBtnPlay = function(audioplayer) {
        var btn = e('#id-audio-player-button-play')
        bindEvent(btn, 'click', function() {
            audioplayer.play()
            log("播放")
        })
    }

    var bindBtnPause = function(audioplayer) {
        var btn = e('#id-audio-player-button-pause')
        bindEvent(btn, 'click', function() {
            audioplayer.pause()
            log("暂停")
        })
    }

    var formatSec = function(s) {
        var sec = Math.floor(s)
        return (sec - (sec %= 60)) / 60 + (9 < sec ? ':' : ':0') + sec
    }

    var showTrackCurrentTime = function(audioplayer) {
        bindEvent(audioplayer, 'canplay', function() {
            var interval = 1000
            var clockId = setInterval(function() {
                // 每 1s 都会调用这个函数
                var span = e('#id-current-at')
                span.innerHTML = formatSec(audioplayer.currentTime)
            }, interval)
        })
    }

    var showTrackDuration = function(audioplayer) {
        bindEvent(audioplayer, 'canplay', function() {
            var dur = audioplayer.duration
            var span = e('#id-track-duration')
            span.innerHTML = formatSec(dur)
        })
    }

    var showTrackList = function() {
        var tracks = es('.track')
        for (var i = 0; i < tracks.length; i++) {
            var path = tracks[i].dataset.path
            tracks[i].innerHTML = path
        }
    }

    var bindTrackPlay = function(audioplayer) {
        var tracks = es('.track')
        for (var i = 0; i < tracks.length; i++) {
            bindEvent(tracks[i], 'click', function(event) {
                var self = event.target
                audioplayer.src = self.dataset.path
                bindEvent(audioplayer, 'canplay', function() {
                    audioplayer.play()
                })
            })
        }
    }

    var bindAudioPlayer = function() {
        var audioPlayer = e('#id-audio-player')
        bindBtnPlay(audioPlayer)
        bindBtnPause(audioPlayer)
        showTrackCurrentTime(audioPlayer)
        showTrackDuration(audioPlayer)
        showTrackList()
        bindTrackPlay(audioPlayer)
    }
{'fraction_non_alphanumeric': 0.1401151631477927, 'fraction_numerical': 0.008517274472168906, 'mean_word_length': 1.9490626105412097, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 81, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1023233', 'n_tokens_mistral': 2790, 'n_tokens_neox': 2783, 'n_words': 523}