html \ jquery 写 audio

最新推荐文章于 2024-07-11 22:36:37 发布

oceanxy11

最新推荐文章于 2024-07-11 22:36:37 发布

阅读量204

点赞数 2

文章标签： html jquery 前端

本文链接：https://blog.csdn.net/oceanxy11/article/details/137682517

版权

本文介绍了如何使用JavaScript和jQuery来控制HTML5音频元素，包括音频长度、播放位置、音量操作，以及事件监听如durationchange，以及自定义进度条和音量控制功能的实现。

摘要由CSDN通过智能技术生成

样式如上方：

参考网站：菜鸟教程 audio 、juery

涉及 audio 的几个属性

duration：音频长度（以秒计）

currentTime：当前播放的位置（以秒计）

volume：音量

及 audio 的几个方法：

play() : 开始播放当前音频

pause() : 暂停当前播放的音频

load()：重新加载音频/视频元素

事件：

durationchange ：当音频/视频的时长已更改时触发

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>控制条</title>
    <style>
        .progress {
            width: 100%;
            height: 10px;
            border-radius: 5px;
            background-color: #8E8E8E;
            position: relative;
            margin-bottom: 40px;
            cursor: pointer;
        }

        .target_progress {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 0%;
            height: 10px;
            border-radius: 5px;
            background-color: #0AAE8A;
        }

        .target_progress::after {
            content: '';
            width: 20px;
            height: 20px;
            background-color: #0AAE8A;
            border-radius: 50%;
            position: absolute;
            right: -15px;
            top: -5px;
        }

        .zanting {
            display: flex;
        }

        .zanting_div {
            width: 30px;
            height: 30px;
            margin-right: 30px;
            cursor: pointer;
        }

        .zt_img {
            width: 100%;
            height: 100%;
            display: none;
        }

        .bf_img {
            width: 100%;
            height: 100%;
        }

        .yl_progress {
            width: 300px;
            height: 10px;
            border-radius: 5px;
            background-color: #8E8E8E;
            position: relative;
            margin-right: 20px;
            cursor: pointer;
        }

        .taryl_progress {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 30%;
            height: 10px;
            border-radius: 5px;
            background-color: #000;
        }

        .taryl_progress::after {
            content: '';
            width: 20px;
            height: 20px;
            background-color: #000;
            border-radius: 50%;
            position: absolute;
            right: -5px;
            top: -5px;
        }

        .yl_tupian {
            width: 30px;
            height: 30px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .yl_img {
            width: 100%;
            height: 100%;
        }

        .jy_img {
            width: 100%;
            height: 100%;
            display: none;
        }
    </style>
    <script type="text/javascript" src="./jquery/jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>

<body>
    <audio src="./ceshi.mp3" controls="controls" id="audio"></audio>

    <div style="padding: 10px 20px; border: 1px solid #ddd;">
        <div class="progress" id="progress">
            <div class="target_progress" id="target_progress"></div>
        </div>
        <div style="display: flex;justify-content: space-between;align-items: center;">
            <div class="zanting">
                <div class="zanting_div" id="zanting_div">
                    <img class="zt_img" id="zt_img" src="./zanting.png" alt="">
                    <img class="bf_img" id="bf_img" src="./bofang.png" alt="">
                </div>
                <div class="shijian"><span id="curtime">0:00</span> /<span id="toltime"> 0:50</span></div>
            </div>
            <div style="display: flex;align-items: center;">
                <div class="yl_progress" id="vol_progress">
                    <div class="taryl_progress" id="target_volprogress"></div>
                </div>
                <div class="yl_tupian" id="yl_tupian">
                    <img class="yl_img" id="yl_img" src="./yinliang.png" alt="">
                    <img class="jy_img" id="jy_img" src="./jingyin.png" alt="">
                </div>
            </div>
        </div>
    </div>



    <script>

        $(document).ready(function () {
            var myAudio = $('#audio')[0]

            myAudio.load()

            // 获取总时长
            $('#audio').on('durationchange', function () {
                let tolduration = document.getElementById("audio").duration
                let fen = parseInt(tolduration / 60) < 9 ? '0' + parseInt(tolduration / 60) : parseInt(tolduration / 60)
                let second = (tolduration % 60) < 9 ? '0' + (tolduration % 60).toFixed(0) : (tolduration % 60).toFixed(0)
                $('#toltime').text(fen + ':' + second)
            })


            // 暂停和启动
            $('#zanting_div').click(function () {
                // debugger
                if ($('#zt_img').is(":hidden")) {
                    $('#zt_img').show()
                    $('#bf_img').hide()
                    myAudio.play()
                } else if ($('#bf_img').is(":hidden")) {
                    $('#zt_img').hide()
                    $('#bf_img').show()
                    myAudio.pause()
                }
                console.log(document.getElementById("audio").duration, 'duration')
            })

            // 静音和放音
            $('#yl_tupian').click(function () {
                if ($('#yl_img').is(':hidden')) {
                    $('#yl_img').show()
                    $('#jy_img').hide()
                    myAudio.muted = false
                } else {
                    $('#yl_img').hide()
                    $('#jy_img').show()
                    myAudio.muted = true
                }
            })

            // 进度条的宽度
            var progressWidth = $('#progress').width()
            var volProgressWidth = $('#vol_progress').width()

            // 鼠标在进度条上点击的距离
            // 进度条
            var statu = false;
            // 音量进度条
            var volStatu = false

            $('#progress').mousedown(function (e) {
                let ox = e.pageX - $('#progress').offset().left
                let bfb = (ox / progressWidth * 100).toFixed(2)
                if (bfb < 100) {
                    $('#target_progress').width(bfb + '%')
                    let audioId = document.getElementById("audio")
                    audioId.currentTime = ox * (audioId.duration) / progressWidth
                    statu = true
                }
            })

            $(document).mousemove(function (e) {
                if (statu) {
                    let mouseDistance = e.pageX - $('#progress').offset().left
                    let bfb = (mouseDistance / progressWidth * 100).toFixed(2)
                    if (bfb <= 100) {
                        $('#target_progress').width(bfb + '%')
                        let audioId = document.getElementById("audio")
                        audioId.currentTime = mouseDistance * (audioId.duration) / progressWidth
                    }
                    $('#zt_img').hide()
                    $('#bf_img').show()
                    myAudio.pause()
                }
                if (volStatu) {
                    let volDistance = e.pageX - $('#vol_progress').offset().left
                    let volbfb = (volDistance / volProgressWidth * 100).toFixed(2)
                    if (volbfb <= 100) {
                        $('#target_volprogress').width(volbfb + '%')
                        myAudio.volume = volbfb / 100
                    }
                }
            })

            $(document).mouseup(function () {
                if (statu) {
                    statu = false
                    $('#zt_img').show()
                    $('#bf_img').hide()
                    myAudio.play()
                }
                if (volStatu) {
                    volStatu = false
                }
            })

            // 当前播放位置更改时触发
            $('#audio').on('timeupdate', function () {
                let audioId = document.getElementById("audio")
                let bfb = (audioId.currentTime / audioId.duration * 100).toFixed(2)
                $('#target_progress').width(bfb + '%')

                // 当前时长
                let currentduration = audioId.currentTime
                let fen = parseInt(currentduration / 60) < 9 ? '0' + parseInt(currentduration / 60) : parseInt(currentduration / 60)
                let second = (currentduration % 60) < 9 ? '0' + (currentduration % 60).toFixed(0) : (currentduration % 60).toFixed(0)
                $('#curtime').text(fen + ':' + second)

                if (bfb == 100) {
                    $('#zt_img').hide()
                    $('#bf_img').show()
                    myAudio.pause()
                }
            })


            // 音量大小
            $('#vol_progress').mousedown(function (e) {
                let constance = e.pageX - $('#vol_progress').offset().left
                let bfb = (constance / volProgressWidth * 100).toFixed(2)
                myAudio.volume = bfb / 100
                $('#target_volprogress').width(bfb + '%')
                volStatu = true
            })

        })
    </script>
</body>

</html>