提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

Html音频播放代码

2023-02-19 12:17:09 时间

页面代码：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!--media=print  这个属性可以在打印时有效-->
    <title>音频播放</title>
    <style type="text/css">
        .audio-wrapper {
            background-color: #fcfcfc;
            margin: 10px auto;
            max-width: 670px;
            height: 70px;
            border: 1px solid #e0e0e0;
        }

        .audio-left {
            float: left;
            text-align: center;
            width: 18%;
            height: 100%;
        }

            .audio-left img {
                width: 40px;
                position: relative;
                top: 15px;
                margin: 0;
                display: initial; /* 解除与app的样式冲突 */
                cursor: pointer;
            }

        .audio-right {
            margin-right: 2%;
            float: right;
            width: 80%;
            height: 100%;
        }

            .audio-right p {
                font-size: 15px;
                /*height: 35%;*/
                height: 20%;
                margin: 8px 0;
                /* 歌曲名称只显示在一行，超出部分显示为省略号 */
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                max-width: 243px; /* 要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */
            }

        .progress-bar-bg {
            background-color: #d9d9d9;
            position: relative;
            height: 2px;
            cursor: pointer;
        }

        .progress-bar {
            background-color: #649fec;
            width: 0;
            height: 2px;
        }

        .progress-bar-bg span {
            content: " ";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            background-color: #3e87e8;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -5px;
            margin-left: -5px;
            cursor: pointer;
        }

        .audio-time {
            overflow: hidden;
            margin-top: -1px;
        }

        .audio-length-total {
            float: right;
            font-size: 12px;
            margin-top: 5px;
        }

        .audio-length-current {
            float: left;
            font-size: 12px;
            margin-top: 5px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div class="audio-wrapper">
        <audio>
            <source src="http://music.163.com/song/media/outer/url?id=447925558.mp3" type="audio/mp3">
        </audio>
        <div class="audio-left"><img id="audioPlayer" src="play.png" /></div>
        <div class="audio-right">
            <p style="max-width: 536px;"><!--Beta-B_Kan R. Gao.mp3--></p>
            <div class="progress-bar-bg" id="progressBarBg">
                <span id="progressDot"></span>
                <div class="progress-bar" id="progressBar"></div>
            </div>
            <div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total">01:06</span></div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            // 控制音频文件名显示宽度
            var maxW = $('.audio-right').width();
            $('.audio-right p').css({
                "max-width": maxW
            });
            initAudioEvent();
        });
        /**
         * 初始化音频控制事件
         */
        function initAudioEvent() {
            var audio = $('audio')[0];
            // 点击播放/暂停图片时，控制音乐的播放与暂停
            $('#audioPlayer').click(function () {
                // 监听音频播放时间并更新进度条
                audio.addEventListener('timeupdate', function () {
                    updateProgress(audio);
                }, false);
                // 监听播放完成事件
                audio.addEventListener('ended', function () {
                    audioEnded();
                }, false);
                // 改变播放/暂停图片
                if (audio.paused) {
                    // 开始播放当前点击的音频
                    audio.play();
                    $('#audioPlayer').attr('src', 'pause.png');
                } else {
                    audio.pause();
                    $('#audioPlayer').attr('src', 'play.png');
                }
            });
            // 点击进度条跳到指定点播放
            // PS：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时e.offsetX的值非常小，会导致进度条弹回开始处（简直不能忍！！）
            $('#progressBarBg').on('mousedown', function (e) {
                // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
                if (!audio.paused || audio.currentTime != 0) {
                    var pgsWidth = $('.progress-bar-bg').width();
                    var rate = e.offsetX / pgsWidth;
                    audio.currentTime = audio.duration * rate;
                    updateProgress(audio);
                }
            });
            var dot = document.getElementById('progressDot');
            // 鼠标拖动进度点时可以调节进度
            // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
            // 鼠标按下时
            dot.onmousedown = function (e) {
                if (!audio.paused || audio.currentTime != 0) {
                    var oriLeft = dot.offsetLeft;
                    var mouseX = e.clientX;
                    var maxLeft = oriLeft; // 向左最大可拖动距离
                    var maxRight = document.getElementById('progressBarBg0').offsetWidth - oriLeft; // 向右最大可拖动距离
                    // 禁止默认的选中事件（避免鼠标拖拽进度点的时候选中文字）
                    if (e.preventDefault) {
                        e.preventDefault();
                    } else {
                        e.returnValue = false;
                    }
                    // 禁止事件冒泡
                    if (e && e.stopPropagation) {
                        e.stopPropagation();
                    } else {
                        window.event.cancelBubble = true;
                    }
                    // 开始拖动
                    document.onmousemove = function (e) {
                        var length = e.clientX - mouseX;
                        if (length > maxRight) {
                            length = maxRight;
                        } else if (length < -maxLeft) {
                            length = -maxLeft;
                        }
                        var pgsWidth = $('.progress-bar-bg').width();
                        var rate = (oriLeft + length) / pgsWidth;
                        audio.currentTime = audio.duration * rate;
                        updateProgress(audio);
                    };
                    // 拖动结束
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                }
            };
        }
        /**
         * 更新进度条与当前播放时间
         * @param {object} audio - audio对象
         */
        function updateProgress(audio) {
            var value = audio.currentTime / audio.duration;
            $('#progressBar').css('width', value * 100 + '%');
            $('#progressDot').css('left', value * 100 + '%');
            $('#audioCurTime').html(transTime(audio.currentTime));
        }
        /**
         * 播放完成时把进度调回开始的位置
         */
        function audioEnded() {
            $('#progressBar').css('width', 0);
            $('#progressDot').css('left', 0);
            $('#audioPlayer').attr('src', 'play.png');
        }
        /**
         * 音频播放时间换算
         * @param {number} value - 音频当前播放时间，单位秒
         */
        function transTime(value) {
            var time = "";
            var h = parseInt(value / 3600);
            value %= 3600;
            var m = parseInt(value / 60);
            var s = parseInt(value % 60);
            if (h > 0) {
                time = formatTime(h + ":" + m + ":" + s);
            } else {
                time = formatTime(m + ":" + s);
            }
            return time;
        }
        /**
         * 格式化时间显示，补零对齐
         * eg：2:4  -->  02:04
         * @param {string} value - 形如 h:m:s 的字符串
         */
        function formatTime(value) {
            var time = "";
            var s = value.split(':');
            var i = 0;
            for (; i < s.length - 1; i++) {
                time += s[i].length == 1 ? ("0" + s[i]) : s[i];
                time += ":";
            }
            time += s[i].length == 1 ? ("0" + s[i]) : s[i];
            return time;
        }
    </script>
</body>
</html>

 

相关图片：

pause.png

play.png

 

相关文章