js制作简单的音乐播放器的示例代码

一、设计目的:

1、随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器。

2、主要功能:

1 支持循环自动播放

2 支持图片的旋转

3 支持调整播放的位置,以及调整声音的大小

4 歌词滚动效果

5 每秒显示音乐的播放时间

二 、设计思路:

1、向浏览器中添加背景音乐:

首先应该向网页中添加几首好听的背景音乐。添加音乐有,两种方式可以用一个audo标签,这样应该把音乐的地址存放到一个数组中,第二种方式是,有几首歌就添加几个audo标签,然后获取所有的北京音乐(先添加三首音乐,放到一个数组中);

    play1=document.getElementById("play1");
    play2=document.getElementById("play2");
    play3=document.getElementById("play3");
    play=[play1,play2,play3];

1、播放音乐的时候图片惊醒旋转

2、播放音乐的时候滚动条滚动

3、播放音乐的时候是事件随着背景音乐的播放时间增加

图片转动的函数,当音乐播放的时候调用rotate()函数

 functionrotate(){
         vardeg=0;
         flag=1;
         timer=setInterval(function(){
           image.style.transform="rotate("+deg+"deg)";
           deg+=5;
           if(deg>360){
            deg=0;
           }
         },30);
       }

清除定时器的函数,当音乐暂停的时候调用imagePause(),图片旋转的定时器被清除掉

  functionimagePause(){
         clearInterval(timer);
         flag=0;
       }

2:先定义两个宽度长度大小一样颜色不同的两个div,利用currenttime属性来过去当前的播放的时间,设一个div一开始的长度为零,然后通过当前播放的事件来调整div长度大小就能实现滚动条的效果了。

 functionjindutiao(){
         //获取当前歌曲的歌长
         varlenth=play[index].duration;
         timer1=setInterval(function(){
           cur=play[index].currentTime;//获取当前的播放时间
           fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
         },50)
       }

将进度条滚动的定时器清除掉,然后div的长度还原为0;

function reducejindutiao(){
         clearInterval(timer1);
         fillbar.style.width="0";
       }

3,背景音乐的播放时间也是利用currenttime来随时改变,不过应该注意currenttime的计时单位为秒

function addtime(){
         timer2=setInterval(function(){
           cur=parseInt(play[index].currentTime);//秒数
           vartemp=cur;
           minute=parseInt(temp/60);
           if(cur%60<10){
            time.innerHTML=""+minute+":0"+cur%60+"";
           }else{
            time.innerHTML=""+minute+":"+cur%60+"";
           }
         },1000);
       }

二、实现通过进度条来调整歌曲的播放位置:

首先应该理清一下逻辑:当点击进度条的时候,滚动条的宽度应该跟鼠标的offsetX一样长,然后根据进度条的长度来调整听该显示的时间

(1) 给滚动条的div添加一个事件,当滚动条长度变化的时候歌曲的当前播放的时间调整,300是滚动条的总长度

   function adjust(e){
         var bar=e.target;
         var x=e.offsetX;
         varlenth=play[index].duration;
         fillbar.style.width=x+"px";
         play[index].currentTime=""+parseInt(x*lenth/300)+"";
         play[index].play();
       }

(2) 改变声音大小的滚动条,跟改变播放时间类似,利用volume属性(值为零到一)

function changeVolume(e){
         var x=e.offsetX+20;
         play[index].volume=parseFloat(x/200)*1;
         //改变按钮的位置
         volume3.style.left=""+x+"px";
       }

(3)随机跟顺序播放音乐

顺序播放音乐的时候,直接index++当index的范围超过歌曲的长度的时候,index=0重新开始。随机播放的函数类似,当歌曲播放完毕的时候,随机产生一个0到play.length的数字就可以了

functionshunxu(e){
         var img=e.target;
         img1.style.border="";
         img.style.border="1pxsolid red";
         clearInterval(suijiplay);
         shunxuplay=setInterval(function(){
           if(play[index].ended){
             add();
           }
         },1000);
       }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS+html5制作简单音乐播放器

    本教程为大家分享了JS音乐播放器的具体代码,供大家参考,具体内容如下 1.HTML <audio> 标签定义声音,比如音乐或其他音频流.其主要属性有src:要播放的音频的 URL,controls:如果出现该属性,则向用户显示控件,比如播放按钮. 几个主要的标签如下: <div> <h4 id="name">李玉刚 - 刚好遇见你</h4> <br> <audio id="audio" src=&qu

  • 运用js教你轻松制作html音乐播放器

    用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc

  • JavaScript实现带播放列表的音乐播放器实例分享

    代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • JS模拟酷狗音乐播放器收缩折叠关闭效果代码

    本文实例讲述了JS模拟酷狗音乐播放器收缩折叠关闭效果代码.分享给大家供大家参考,具体如下: 这是一款模拟酷狗音乐播放器的关闭特效,采用JavaScript实现,关闭的时候播放界面缩成一条线,然后消失,就像有些电视机突然停电的效果,很有意思的网页动画特效. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-kugou-music-player-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • js制作简单的音乐播放器的示例代码

    一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播放 2 支持图片的旋转 3 支持调整播放的位置,以及调整声音的大小 4 歌词滚动效果 5 每秒显示音乐的播放时间 二 .设计思路: 1.向浏览器中添加背景音乐: 首先应该向网页中添加几首好听的背景音乐.添加音乐有,两种方式可以用一个audo标签,这样应该把音乐的地址存放到一个数组中,第二种方式是,有

  • python 制作简单的音乐播放器

    如你所见,功能很简单.只有基本的播放,停止,甚至只针对一首歌曲,仅供初学者参考学习用. 代码 from tkinter import * from tkinter import filedialog from pygame import mixer class MusicPlayer: def __init__(self, window ): window.geometry('320x100'); window.title('Iris Player'); window.resizable(0,0

  • 原生JS实现音乐播放器的示例代码

    本文主要介绍了原生JS实现音乐播放器的示例代码,分享给大家,具体如下: 效果图 音乐播放器 播放控制 播放进度条控制 歌词显示及高亮 播放模式设置 播放器属性归类 按照播放器的功能划分,对播放器的属性和DOM元素归类,实现同一功能的元素和属性保存在同一对象中,便于管理和操作 const control = { //存放播放器控制 play: document.querySelector('#myplay'), ... index: 2,//当前播放歌曲序号 ... } const audioFi

  • 利用java制作简单的音乐播放器

    本文主要是用到java中的swing技术,以及JMFjar中的API,为大家分享了java音乐播放器的具体实现代码,供大家参考,具体内容如下 备注:需要用JDK1.8才能播放音乐MP3 package baidu; import java.awt.*; import java.awt.event.*; import java.io.*; import java.util.*; import javax.swing.*; import javax.media.bean.playerbean.*;

  • 原生JS实现网页手机音乐播放器 歌词同步播放的示例

    整了一下  之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪 //获取歌词文本 var txt = document.getElementById("lrc"); var lrc = txt.value;//获取文本域里的值 /*console.log(lrc);*/ var lrcArr = lrc.split("[");//去除[ /*console.log(lrcArr);*/ var html = "";//定义一个

  • 使用HTML5+Boostrap打造简单的音乐播放器

    前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是jQuery的源码和Boostrap.js的源码,任务很艰巨呢,加油~在此就不整篇的贴代码了,如果感兴趣的小伙伴可以发消息给我,可以把代码传给你们~ 正文: 先上效果图 1.布局:Boostrap里的响应式和自适应布局是自然跑不掉的,container中嵌套row再分别嵌套aside和main(H5新

  • Android实现简单的音乐播放器

    本文实例为大家分享了Android实现简单音乐播放器的具体代码,供大家参考,具体内容如下 1.制作一个简易的音乐播放器 使用软件:Android studio + jdk1.8 + Gradle6.5(其他版本也可以) 2.activity_main.xml文件(主页面的编写) 先看一下示意图再来排版(音乐板块的模型看的是某云) 分3个部分来看,第一个是音乐的标题,就是Sky_High.No Copyright Sounds和那个圆形的可以转动的图标. <ImageView     androi

  • Java实现的简单音乐播放器功能示例

    本文实例讲述了Java实现的简单音乐播放器功能.分享给大家供大家参考,具体如下: 应用名称:Java简单的音乐播放器 用到的知识:Java GUI编程,线程,IO 开发环境:win8+eclipse+jdk1.8 功能说明:可以选择内置的音乐文件播放,循环播放,停止.PS:这个播放器只能播放.au .aiff .wav .midi .rfm格式的音频. 效果图: 源代码: import java.applet.AudioClip; import java.awt.*; import java.n

  • JavaScript实现简单的音乐播放器

    本文实例为大家分享了JavaScript实现简单音乐播放器的具体代码,供大家参考,具体内容如下 主要功能:快进.快退.暂停.上下一首.禁音.鼠标控制音量.自动下一首.显示歌名 <html> <head>     @*不提供音频*@     <meta name="viewport" content="width=device-width" />     <title>ceshi14</title> <

随机推荐