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

更新时间：2022年09月15日 15:37:04 作者：1个俗人

这篇文章主要为大家详细介绍了如何利用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音乐播放器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

require简单实现单页应用程序(SPA)
下面小编就为大家带来一篇require简单实现单页应用程序(SPA)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
基于JavaScript短信验证码如何实现
我们在使用移动、电信等运营商网上营业厅的时候，为确保业务的完整和正确性，经常会需要用到短信的验证码。最近因为某省业务需要，也做了个类似的功能
2016-01-01
Bootstrap Chart组件使用教程
图表组件Chart.js是Bootstrap比较好用的组件之一,与一款收费的组件highchart类似,效果上来看免费与收费的产品相差还是有一点点的，不过功能上差不多能满足我们项目的需要，本文给大家介绍Bootstrap Chart组件使用，需要的朋友参考下吧
2016-04-04
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
这篇文章主要介绍了escape()、encodeURI()、encodeURIComponent()的区别,需要的朋友可以参考下
2014-08-08
JavaScript正则表达式简单实用实例
这篇文章主要介绍了JavaScript正则表达式简单实用实例的相关资料,需要的朋友可以参考下
2017-06-06
JavaScript 字符编码规则
通过页面向后台传递中文数据时少不了编/解码。。
2009-05-05
微信分享invalid signature签名错误踩过的坑
这篇文章主要介绍了微信分享invalid signature签名错误踩过的坑,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
JS实现点击button按钮切换图片
这篇文章主要为大家详细介绍了JS实现点击button按钮切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
javascript修改IMG标签的src问题
javascript修改IMG标签的SRC，在IE6下面图片修改正常，但在IE7和Firefox下面却不刷新，下面有个解决方法，大家可以参考下
2014-03-03
JS实现逐页将PDF文件转为图片格式
这篇文章主要为大家分享了如何通过前端js将pdf文件转为图片格式，并且支持翻页预览、以及图片打包下载，文中的示例代码简洁易懂，需要的可以参考一下
2023-05-05