javascript - 尝试播放音频时出现“无法读取未定义的属性‘添加’”

Question

我似乎无法弄清楚这里的问题是什么。

单击“播放”时，我在函数中收到 UnCaughtTypeError“无法读取未定义的属性‘添加’” togglePlay。

Javascript代码：

function $(id) {
        return document.getElementById(id);
    };
    const media = document.getElementById('audio');

    let ui = {
        play: 'playAudio',
        audio: 'audio',
        percentage: 'percentage',
        seekObj: 'seekObj',
        currentTime: 'currentTime'
    };

    function togglePlay() {
        if (media.paused === false) {
            media.pause();
            $(ui.play).classList.remove('pause');
        } else {
            media.play();
            $(ui.play).classList.add('pause');
        }
    };

    function calculatePercentPlayed() {
        let percentage = (media.currentTime / media.duration).toFixed(2) * 100;
        $(ui.percentage).style.width = `${percentage}%`;
    }

    function calculateCurrentValue(currentTime) {
        const currentMinute = parseInt(currentTime / 60) % 60;
        const currentSecondsLong = currentTime % 60;
        const currentSeconds = currentSecondsLong.toFixed();
        const currentTimeFormatted = `${currentMinute < 10 ? `0${currentMinute}` : currentMinute}:${
        currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds
    }`;

        return currentTimeFormatted;
    }

    function initProgressBar() {
        const currentTime = calculateCurrentValue(media.currentTime);
        $(ui.currentTime).innerHTML = currentTime;
        $(ui.seekObj).addEventListener('click', seek);

        media.onended = () => {
            $(ui.play).classList.remove('pause');
            $(ui.percentage).style.width = 0;
            $(ui.currentTime).innerHTML = '00:00';
        };

        function seek(e) {
            const percent = e.offsetX / this.offsetWidth;
            media.currentTime = percent * media.duration;
        }

        calculatePercentPlayed();
    }

    $(ui.play).addEventListener('click', togglePlay)
    $(ui.audio).addEventListener('timeupdate', initProgressBar);

HTML 代码：

<div class="audio-player">
                    <audio id="audio">
                        <source src="{{ product.audio_file.url }}" type="audio/mp3">
                    </audio>

                    <div class="player-controls">
                        <div id="radioIcon"></div>
                        <button id="playAudio"></button>
                        <div id="seekObjContainer">
                            <div id="seekObj">
                                <div id="percentage"></div>
                            </div>
                        </div>
                        <p><small id="currentTime">00:00</small></p>
                    </div>
                </div>

我看到这个问题与添加类.pause有关，ui但我无法弄清楚到底是什么问题。如果有人可以提供帮助，那就太好了！如果需要任何其他信息，请告诉我，我很乐意提供。谢谢。

标签： javascripthtmljquery