自制音乐播放器素材取自网络

最新推荐文章于 2022-08-20 19:33:17 发布

csdn甑子蛋

最新推荐文章于 2022-08-20 19:33:17 发布

阅读量803

点赞数 3

本文链接：https://blog.csdn.net/qq_42046342/article/details/87262107

版权

<html xmlns:th="http://www.thymeleaf.org">
<head>
   <style type="text/css">
       .Audio{position: relative; width: 500px; margin: 0 auto;}
       .pgs{width: 326px; margin: 0 auto 30px; background-color: #E3E8EE; text-align: center; position: relative; overflow: hidden; height: 50px;}
       .pgs-play{position: absolute; top:0; left: 4.65%; width: 0; height: 100%; background-color: #4785f9; z-index: 1;}
       .pgs img{width: 100%; position: relative; z-index: 2;}
       .audio-name{position: absolute; top: 0; width: 100%; left: 0;text-align: center; color: #666; font-size: 12px;}
       .controls{width: 100%; height: 40px; padding: 0; text-align: center;}
       .play-pause{border: 0; outline: 0; padding: 0; width: 40px; height: 40px; margin: 0 28px; background: none; display: inline-block; vertical-align: middle;}
       .icon-play{width: 40px; height: 40px; background: url(/images/music/play.png) no-repeat; display: block; color: #478f59;}
       .icon-pause{width: 40px; height: 40px; background: url(/images/music/pause.png) no-repeat; display: block; color: #478f59;}
       .controls span{color: #b3b5b7; font-size: 12px; display: inline-block; width: 34px;}
       .audio-time{display: inline-block; vertical-align: middle;}
   </style>
</head>
<body>
<div class="Audio">
    <audio id="audioTag" src="../story.mp3" autoplay hidden="hidden"></audio>
    <div class="pgs">
        <div class="pgs-play" id="progress" style="width: 20%;"></div>
        <img src="../images/music/progress.png"/>
    </div>
    <div class="controls">
        <span class="played-time">00:00</span>
        <button class="play-pause" id="playPause">
            <span class="icon-btn icon-play"></span>
        </button>
        <span class="audio-time" id="audioTime">0</span>
    </div>
</div>
</body>
<script type="text/javascript">

    $(function () {
        var audio = $('#audioTag').get(0);
        //播放暂停控制
        $('#playPause').click(function () {

            //监听音频播放时间并更新进度条
            audio.addEventListener('timeupdate', updateProgress, false);
            //监听播放完成事件
            audio.addEventListener('ended', audioEnded, false);


            //改变暂停/播放icon
            if (audio.paused) {
                audio.play();
                $('.icon-btn').removeClass('icon-play').addClass('icon-pause')
            } else {
                audio.pause();
                $('.icon-btn').removeClass('icon-pause').addClass('icon-play')
            }
        })

        //读取视频长度,设置页面时长显示-loadedmetadata:指定视频/音频（audio/video）的元数据加载后触发
        //audio.duration 获取音频的时长，单位为秒
        $('#audioTag').on("loadedmetadata", function () {
            //alert(audio.duration)
            $('#audioTime').text(transTime(this.duration));
        });

        var pgsWidth = $('.pgs img').width() * 0.907; //0.907是 进度条这个div和整个进度条图片宽度的比例
        //点击进度条跳到指定点播放
        $('.pgs img').click(function (e) {

            var rate = (e.offsetX - ($(this).width() - pgsWidth) / 2) / pgsWidth;
            audio.currentTime = audio.duration * rate;
            updateProgress();
        });

    })

    //转换音频时长显示
    function transTime(time) {
        var duration = parseInt(time);
        var minute = parseInt(duration / 60);
        var sec = duration % 60 + '';
        var isM0 = ':';
        if (minute == 0) {
            minute = '00';
        } else if (minute < 10) {
            minute = '0' + minute;
        }
        if (sec.length == 1) {
            sec = '0' + sec;
        }
        return minute + isM0 + sec
    }

    //更新进度条
    function updateProgress() {
        var audio = document.getElementsByTagName('audio')[0];
        var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
        $('.pgs-play').css('width', value * 0.907 + '%');
        $('.played-time').html(transTime(audio.currentTime));


    }

    //播放完成
    function audioEnded() {
        var audio = document.getElementsByTagName('audio')[0];
        audio.currentTime = 0;
        $('#audioTag')[0].pause();
        if ($("#audioTag").attr("src") == "../story.mp3") {
            $("#audioTag").attr("src","../烦恼歌.mp3");
        } else {
            $("#audioTag").attr("src","../story.mp3");
        }
        $("#audioTag")[0].play();
        $('.play-pause>span').removeClass('icon-pause').addClass('icon-play');
    }
    //换下一首
    // alert($("#audioTag").attr("src"));
    function x() {


    }
</script>
</html>

csdn甑子蛋

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自制音乐播放器素材取自网络

&lt;html xmlns:th="http://www.thymeleaf.org"&gt;&lt;head&gt; &lt;style type="text/css"&gt; .Audio{position: relative; width: 500px; margin: 0 auto;} .pgs{width: 326px; margin: 0 aut...
复制链接

扫一扫