master

分支 (1)

管理

管理

master

li-zhi-player
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/normalize.css">
    <title>334</title>
</head>
<body>
    <div id="app">
        <audio ref="audio">
            <source :src="'music/'+songList[index]" type="audio/mpeg">
        </audio>
        <h3 class="title">LiZhiPlayer</h3>
        <div class="player">
            <div class="controls">
                <img src="image/1.jpg" alt="" class="cover">
                <div class="controler">
                    <p class="name">
                        {{songList[index].split(" - ")[1].split(".")[0]}}
                    </p>
                    <p class="singer">
                        {{songList[index].split(" - ")[0]}}
                        <span class="loop">
                            <img :src="loopObj.imgSrc" alt="" @click="clickLoop">
                        </span>
                    </p>
                    <div class="line-loading" @click="clickLine">
                        <div class="played" :style="currentWidth">

                        </div>
                    </div>
                    <div class="time-and-volume">
                        <span>{{ currentTime }}</span>
                        /
                        <span>{{ duration}}</span>
                        <span class="mute">
                            <img :src="muteObj.imgSrc" alt="" @click="clickMute">
                        </span>
                        <div class="volume" @click="clickVolume">
                            <div class="current-volume" :style="volumeWidth"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="songs">
                <ul class="song-list">
                    <li class="item" v-for="(item,index) in songList">
                        <span class="order">{{ index+1 }}</span>
                        <span class="name" @click="clickSong(index)">{{item.split(" - ")[1].split(".")[0]}}</span>
                        <span class="singer">{{ item.split(" - ")[0]}}</span>
                    </li>
                </ul>
            </div>
            <div class="display">
                <span class="play" @click="clickBtn2" :style="playObj">
                    <img src="icons/play.png" alt="">
                </span>
                <span class="pause" @click="clickBtn2" :style="pauseObj">
                    <img src="icons/pause.png" alt="">
                </span>
            </div>
        </div>
        <p class="copyright">by:Misaki</p>
    </div>
    <script src="js/flexible.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isPlay: false,
                loopObj:{
                    isLoop: false,
                    imgSrc: "icons/order.png",
                },
                muteObj: {
                    isMute: false,
                    tempVolume: 0,
                    tempVolumeWidth: 0,
                    imgSrc: "icons/speaker.png",
                },
                songList: [
                    "李志 - 月亮代表我的心.m4a",
                    "李志 - 阿兰.m4a",
                    "李志 - 暧昧.m4a",
                    "李志 - 被禁忌的游戏.m4a",
                    "李志 - 春末的南方城市.m4a",
                    "李志 - 董卓瑶.m4a",
                    "李志 - 和你在一起.m4a",
                    "李志 - 黑色信封.m4a",
                    "李志 - 红色气球.m4a",
                    "李志 - 结婚.m4a",
                    "李志 - 卡夫卡.m4a",
                    "李志 - 来了.m4a",
                    "李志 - 青春.m4a",
                    "李志 - 他们.m4a",
                    "李志 - 想起了她.m4a",
                    "李志 - 这个世界会好吗.m4a",
                    ],
                index: 0,
                currentTime: 0,
                duration: 0,
                timer: 0,
                currentWidth: {
                    width: 0
                },
                volumeWidth: {
                    width: 0,
                },
                playObj: {
                    opacity: 0.8,
                },
                pauseObj:{
                    opacity: 0,
                }

            },

            methods: {
                clickLoop: function(){
                    this.loopObj.isLoop = !this.loopObj.isLoop;
                    this.loopObj.isLoop?this.loopObj.imgSrc="icons/loop1.png":this.loopObj.imgSrc="icons/order.png";
                },
                clickLine: function(event){
                    var audio = this.$refs.audio;
                    var wholeWidth = 5.6821;
                    var currentWidth = event.offsetX/37.5;
                    audio.currentTime = currentWidth / wholeWidth * audio.duration;
                    this.currentWidth.width = currentWidth+"rem";
                    console.log(event.offsetX/37.5+"rem");
                },
                showTime: function(){
                    var audio = this.$refs.audio;
                    var currentTime = audio.currentTime;
                    var min = currentTime / 60;
                    var sec = currentTime % 60;
                    var durationMin = audio.duration / 60;
                    var durationSec = audio.duration % 60;
                    min = (0 | min);
                    sec = (0 | sec);
                    durationMin = (0 | durationMin);
                    durationSec = (0 | durationSec);
                    this.currentTime = min+":"+(sec<10?"0"+sec:sec);
                    this.duration = durationMin+":"+(durationSec<10?"0"+durationSec:durationSec);
                    //console.log(audio.currentTime);
                    var currentWidth = audio.currentTime/audio.duration*5.6821;
                    this.currentWidth.width = currentWidth + "rem";
                    if(audio.ended){
                        if(!this.loopObj.isLoop)
                            this.index = (this.index+1) % this.songList.length;
                        audio.load();
                        audio.play();
                    }
                    //console.log("当前进度条长度 "+this.currentWidth.width);
                },
                clickSong: function(index){
                    var audio = this.$refs.audio;
                    this.index = parseInt(index);
                    this.isPlay = true;
                    audio.load();
                    audio.play();
                    console.log(index);
                    if(this.isPlay)
                        audio.play();
                    else
                        audio.pause();
                    if(this.isPlay){
                        this.playObj.opacity = 0;
                        this.pauseObj.opacity = 0.4;
                        this.playObj.transform = "translate(1.363636rem, 0)";
                    }
                    else{
                        this.playObj.opacity = 0.4;
                        this.pauseObj.opacity = 0;
                        this.playObj.transform = "translate(0, 0)";
                    }
                },
                //volume长度: 2.7269rem
                clickVolume: function(event){
                    var audio = this.$refs.audio;
                    var wholeVolumeWidth = 2.7269;
                    var volumeWidth = event.offsetX/37.5;   //rem
                    audio.volume = volumeWidth / wholeVolumeWidth;
                    this.volumeWidth.width = volumeWidth + "rem";
                },
                clickBtn2: function(){
                    var audio = this.$refs.audio;
                    this.isPlay = !this.isPlay;
                    if(this.isPlay)
                        audio.play();
                    else
                        audio.pause();
                    if(this.isPlay){
                        this.playObj.opacity = 0;
                        this.pauseObj.opacity = 0.4;
                        this.playObj.transform = "translate(1.363636rem, 0)";
                    }
                    else{
                        this.playObj.opacity = 0.4;
                        this.pauseObj.opacity = 0;
                        this.playObj.transform = "translate(0, 0)";
                    }
                },
                clickMute: function(){
                    var audio = this.$refs.audio;
                    this.muteObj.isMute = !this.muteObj.isMute;
                    if(this.muteObj.isMute){
                        this.muteObj.tempVolume = audio.volume;
                        this.muteObj.tempVolumeWidth = this.volumeWidth.width;
                        this.muteObj.imgSrc = "icons/mute.png";
                        audio.volume = 0;
                        this.volumeWidth.width = 0;
                        console.log(this.muteObj);
                    }
                    else{
                        audio.volume = this.muteObj.tempVolume;
                        this.volumeWidth.width = this.muteObj.tempVolumeWidth;
                        this.muteObj.imgSrc = "icons/speaker.png";
                        console.log(this.muteObj);
                    }
                }
            },

            mounted(){
                var audio = this.$refs.audio;
                this.timer = setInterval(this.showTime, 500);
                audio.volume = 0.5;
                this.volumeWidth.width = 0.5*2.7269+"rem";
            },

            beforeDestroy(){
                clearInterval(this.timer);
            },

            // methods:{
            //     clickBtn: function(){
            //         var audio = this.$refs.audio;
            //         this.$refs.audio.load();
            //         this.musicSrc = "music/朱格乐,张怡然,姚斌 - 结婚 (2016 unplugged).mp3";
            //         this.$refs.audio.play();
            //         console.log("当前音乐的总长度"+audio.duration);
            //     },
            //     //歌曲时间、进度条
            //     showTime: function(){
            //         var audio = this.$refs.audio;
            //         currentTime = audio.currentTime;
            //         var min = currentTime / 60;
            //         var sec = currentTime % 60;
            //         min = (0 | min);
            //         sec = (0 | sec);
            //         this.currentTime = min+":"+(sec<10?"0"+sec:sec);
            //         console.log(audio.currentTime);
            //         var currentWidth = audio.currentTime/audio.duration*500;
            //         this.currentWidth.width = currentWidth + "px";
            //         console.log("当前进度条长度 "+currentWidth);
            //     },
            //     showTotal: function(){
            //         var audio = this.$refs.audio;
            //         console.log("当前音乐的总长度"+audio.duration);
            //     },
            //     clickDiv: function(event){
            //         var audio = this.$refs.audio;
            //         audio.currentTime = event.offsetX/500*audio.duration;
            //         //alert("offsetX: "+event.offsetX+"  offsetY: "+event.offsetY);
            //     },
            //     clickAni: function(){
            //         if(this.toggleColor){
            //             this.aniColor.color = "blue";
            //             this.aniColor.transform = "translate(20px, 0)";
            //             this.playObj.opacity = "0";
            //             this.pauseObj.opacity = "1";
            //         }
            //         else{
            //             this.aniColor.color = "red";
            //             this.aniColor.transform = "translate(0, 0)";
            //             this.playObj.opacity = "1";
            //             this.pauseObj.opacity = "0";
            //         }
            //         this.toggleColor = !this.toggleColor;
            //     },

            // },
            // mounted(){
            //     this.timer = setInterval(this.showTime, 500);
            // },

            // beforeDestroy(){
            //     clearInterval(this.timer);
            // }
        })
    </script>
</body>
</html>