基于JavaScript实现一个月饼音乐播放器

目录

• 前言
• 页面布局
• 页面背景
• 左侧列表
• 中间播放器
• 右侧歌词部分
• 总结

前言

事情的经过是这样的，媳妇中秋发了一盒月饼，里面还有一个小蓝牙音响，她说如果这个音响是个月饼造型之类的是不是更能体现出中秋的气氛。于是我就想到了可以用代码给她实现一个啊，拿出了我仅有的一点点前端看家本领(我是搞后端的)，浪费我三天假期，效果图如下，本来设想的挺好，可是由于本人能力有限，没有达到自己预想的目标，仅供娱乐！

页面布局

页面采用最简单的div+css进行布局，首先将页面分为三部分，分别为左边音乐列表，中间播放器部分和右边歌词部分。

页面背景

可以选择一张比较好看的照片作为页面背景，我就随便选了一张中秋主题相关的作为背景，下一步准备做一个设置功能可以自定义页面背景。

<div id="back_box" style="background-image: url('http://121.196.234.193/test/images/background.jpeg');"></div>

左侧列表

列表调用后端接口动态加载数据，后端接口采用php实现。

<div class="music_con">
        <div class="m_search">
            <input type="text" class="word search-word" placeholder="搜索"><input type="image" src="http://121.196.234.193/test/images/search.png" class="search-btn" placeholder="">
        </div>
        <ul id="lists">
        </ul>
    </div>

js实现部分如下：

ajax('GET', mp3Url, '', function(data){
                musicList = JSON.parse(data);
                str = '';
                for (var i =0, l= musicList.length; i<l; i++) {
                    if (i==0) {
                        str+='<li class="default">'
                    } else {
                        str +='<li>'
                    }
                    str +=   '<a href="./index.html" rel="external nofollow" >' +
                        '<label>'+musicList[i].title+'</label>' +
                        '<i> - </i>' +
                        '<span>'+musicList[i].singer+'</span>' +
                        '</a>' +
                        '</li>';
                }
                document.getElementById('lists').innerHTML= str
            })

中间播放器

这部分也是核心。

首先设置一个背景，本来想自己用代码画一个月饼的，结果超出了我的能力范围，于是从网上找一张图片，这个月饼是不是看着看诱人，其实这个地方可以根据音乐设定不同的背景，通过接口返回，在这里就先这样吧。

给图片加点特效——让它转起来。

<div class="PlayEy" style="transform: rotate(0deg);"></div>

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)；

音乐播放采用audio标签。

<div class="btns-bg">
    <div class="PlayEy" style="transform: rotate(0deg);"></div>
    <div class="Btn"></div>
    <div class="Play" id="btn_play" item="1" style="background-image: url('http://121.196.234.193/test/images/pause.png'); width: 29px; height: 36px;">
        <audio src="http://121.196.234.193/test/music/1.mp3" id="audio_box" data-id="1"></audio>
    </div>
         <!--按钮（暂停/播放、上一曲、下一曲、声音开关、音量调节、循环播放）-->
         <div id="btn_prev"></div>
         <div id="btn_next"></div>

       <div id="volume_toggle" item="1" style="background-position: -152px 0px;"></div>
       <div class="volume_box">
       <input id="volume_change" type="range" min="1" max="10" value="5" style="background:linear-gradient(to right, #059CFA, #ebeff4 50%, #ebeff4)">
      </div>
     <div id="loop_type" item="1" style="background-position: -105px -58px;"></div>
         <!--音频时间-->
         <div class="time_box">
             <span id="now_time">00:00</span>
             <span id="total_time">00:22</span>
         </div>
         <!--音频播放进度条-->
         <div class="time_axis">
             <div class="slideway">
                 <p id="progress_bar"></p>
                 <div id="ahead_head"></div>
             </div>
         </div>
</div>

audio相关属性：

• autoplay：自动播放（一般浏览器会禁止此行为）。
• controls：显示音频控件。
• loop：循环播放。
• muted：静音。
• preload：加载方式，分auto(当页面加载后载入整个音频)、metadata(当页面加载后只载入元数据)、none(当页面加载后不载入音频)。
• src：音频地址。

js实现

// 启动播放方法
function plays(){
    //_audioDom.load();
    let playPromise = _audioDom.play() ;
    if (playPromise !== undefined) {
        playPromise.then(() => {
            _audioDom.play()
        }).catch(() => {})
    }
}

右侧歌词部分

主要用于展示当前播放音乐的标题和歌词信息，数据采用js动态加载。

<!--音频标题-->
    <div class="title_box">
        <span id="music_title">你笑起来真好看</span>
    </div>
    <!--歌词区域-->
    <div id="music_lyric">
        <span class="lyric_prev"></span>
        <span class="lyric_now"></span>
        <span class="lyric_next"></span>
    </div>

js部分实现：

 /** 当前播放时间发生改变的时候 **/
_audioDom.ontimeupdate = function(){
    _totalTime.innerHTML = timeFormat(_audioDom.duration);	// 音频总时间;
    _nowTime.innerHTML = timeFormat(_audioDom.currentTime);	// 更新当前播放的时间;
    var now_long = _audioDom.currentTime/_audioDom.duration*slidewayWidth; 			 	// 当前时间播放的长度
    _progress.style.width = now_long+'px';		 		// 进度条长度
    _aheadDom.style.left = (now_long-10)+'px'; // 进度条头位置

    //遍历歌词
    for (var i = 0, l = lyricArr.length; i < l; i++) {
        if (_audioDom.currentTime > lyricArr[i][0]) {
            if(i>=1){
                _lyricPrev.innerHTML = lyricArr[i-1][1];
                _lyricNow.innerHTML = lyricArr[i][1];
                if(lyricArr.hasOwnProperty(i+1)){
                    _lyricNext.innerHTML = lyricArr[i+1][1];
                }else {
                    _lyricNext.innerHTML = '';
                }
            }else{
                _lyricPrev.innerHTML = '';
                _lyricNow.innerHTML = lyricArr[i][1];
                _lyricNext.innerHTML = lyricArr[i+1][1];
            }
        }
    }
    addListenTouch(); // 监听手动拉动播放进度条
};

总结

虽然大体效果出来了，但是跟预想的还是有很大差距，因为不是专业的前端，整体实现比较简单，只能做到这了，仅供娱乐！

到此这篇关于基于JavaScript实现一个月饼音乐播放器的文章就介绍到这了,更多相关JavaScript音乐播放器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！