html5+css3 制作音乐播放器

//css//

body , html{
    margin:0;
    padding:0;
    font:12px Arial, Helvetica, sans-serif;
    }
 .MusicBox
   {  
        background-color: #212121;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121));
        background-image: -webkit-linear-gradient(top, #1B1B1B, #212121);
        background-image: -moz-linear-gradient(top, #1B1B1B, #212121);
        background-image: -ms-linear-gradient(top, #1B1B1B, #212121);
        background-image: -o-linear-gradient(top, #1B1B1B, #212121);
        background-image: linear-gradient(top, #1B1B1B, #212121);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        -webkit-box-shadow: 10px 10px 25px #ccc;
        -moz-box-shadow: 10px 10px 25px #ccc;
        box-shadow: 10px 10px 25px #ccc;
        opacity:0.9;
           padding:2px 5px;
        position:absolute;
        z-index:9;
        border-width: 1px;
        border-style: solid;
        border-color: #488BF0 #488BF0 #488BF0 #488BF0;
        width:810px;
        height:40px;
   }

.LeftControl
   {
      width:0px;
      padding: 10px 10px 10px 10px;
      float:left;
      height:20px;
      background:url(sk-dark.png) left 2px no-repeat;
      margin-right:8px;
      margin-left:10px;
   }
   
   .LeftControl:hover
   {
      background:url(sk-dark.png) left -30px no-repeat;
   }

.RightControl
   {
      width:0px;
      padding: 10px 10px 10px 10px;
      float:left;
      height:20px;
      background:url(sk-dark.png) left -62px no-repeat;
      margin-right:8px;
   }
   
   .RightControl:hover
   {
      background:url(sk-dark.png) left -93px no-repeat;
   }
   
   
   .ProcessControl
   {
      width:500px;
      padding: 5px 10px 10px 10px;
      float:left;
      height:20px;
      margin-right:12px;
      color:#ffffff;
   }
   
   .ProcessControl .SongName
   {
      float:left;
   }

.ProcessControl .SongTime
   {
      float:right;      
   }
   
   .ProcessControl .Process
   {
     width: 500px;
     float: left;
     height: 2px;
     cursor: pointer;
     background-color:#000000;   
     margin-top:7px;
   }
   
   .ProcessControl .ProcessYet
   {
     width: 0px;
     position:absolute;     
     height: 2px;
     left:131px;
     top:30px;
     cursor: pointer;
     background-color:#7A8093;
   }
   
   .VoiceEmp
   {
      width:0px;
      padding: 10px 10px 10px 10px;
      float:left;
      height:17px;
      background:url(sk-dark.png) -28px -180px no-repeat;  
      margin-right:2px;  
   }
   
   .VoiceEmp:hover
   {
      background:url(sk-dark.png) -28px -212px no-repeat;
   }
   
   .VoidProcess
   {
     width: 66px;
     height: 2px;
     cursor: pointer;
     background-color:#000;      
     float:left;
     margin-top:19px;
     margin-right:6px;   
   }
   
   .VoidProcessYet
   {
     width: 66px;
     position:absolute;     
     height: 2px;
     left:675px;
     top:21px;
     cursor: pointer;
     background-color:#7A8093;
   }
   
   
   .VoiceFull
   {      
      width:0px;
      padding: 10px 10px 10px 10px;
      float:left;
      height:17px;
      background:url(sk-dark.png) -28px -116px no-repeat;    
   }
   
   .VoiceFull:hover
   {
      background:url(sk-dark.png) -28px -148px no-repeat;    
   }
   
   
   
   .MainControl
   {
      width:25px;
      padding: 10px 15px 5px 10px;
      float:left;
      height:20px;
      background:url(sk-dark.png) -80px -130px no-repeat;    
   }
   
   
   .MainControl:hover
   {
      background:url(sk-dark.png) -80px -166px no-repeat;
   }
   
   
   .StopControl
   {
      width:14px;
      padding: 10px 10px 5px 10px;
      float:left;
      height:20px;
      background:url(sk-dark.png) -50px -130px no-repeat;
      margin-right:16px;   
   }
   
   
   .StopControl:hover
   {
      background:url(sk-dark.png) -50px -165px no-repeat;
   }
   
   
   .MusicList
   {
        background-color:#0FF;
        border-width: 1px;
        border-style: solid;
        border-color: #488BF0 #488BF0 #488BF0 #488BF0;
        width:600px;
        height:200px;
       opacity:0.9;
       padding:2px 5px;
       position:absolute;
       z-index:1000;
       display:none;
   }
   
   .MusicList .url
   {
        background-color:#FFF;
        font:14px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    
        width:158px;
        height:200px;
        float:left;
   }
   
   .MusicList .List
   {
       background-color: #212121;    
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
       
       width:410px;
       height:180px;
       float:right;
       overflow:hidden;
       padding:10px 13px;
       color:#fff;       
   }
   
     .MusicList .List .Single
    {
        width:100%;
        float:left;
        overflow:hidden;
        height:15px;
        font-size:13px;
        cursor:pointer;
        margin-bottom:8px;
    }
   
     .MusicList .List .Single .SongName
     {
       width:90%;
       float:left;
     }
     
     
     .ShowMusicList
     {        
      width:10px;
      padding: 10px 10px 5px 10px;
      float:left;
      height:10px;
      background:#039;
      margin:5px 0 0 12px;
      cursor:pointer;
     }
     
     .ShowMusicList:hover
     {        
      background:red;
     }

//js//

$(document).ready(function () {
    //获取音频工具
    var audio = document.getElementById("myMusic");
    //alert("aaa");
    //开始，暂停按钮
    $("#MainControl")._toggle(function () {
        $(this).removeClass("MainControl").addClass("StopControl");
        if (audio.src == "") {
            var Defaultsong = $(".Single .SongName").eq(0).attr("KV");
            $(".MusicBox .ProcessControl .SongName").text(Defaultsong);
            $(".Single .SongName").eq(0).css("color", "#7A8093");
            audio.src = "Media/" + Defaultsong + ".mp3";
        }
        audio.play();
        TimeSpan();
    }, function () {
        $(this).removeClass("StopControl").addClass("MainControl");
        audio.pause();
    });

//歌曲列表的选择操作
    $(".MusicList .List .Single .SongName").click(function () {
        $(".MusicList .List .Single .SongName").css("color", "#fff");
        $("#MainControl").removeClass("MainControl").addClass("StopControl");
        $(this).css("color", "#7A8093");
        var SongName = $(this).attr("KV");
        $(".MusicBox .ProcessControl .SongName").text(SongName);
        audio.src = "Media/" + SongName + ".mp3";
        audio.play();
        TimeSpan();
    });

//左前进按钮
    $(".LeftControl").click(function () {
        $(".MusicList .List .Single .SongName").each(function () {
            if ($(this).css("color") == "rgb(122, 128, 147)") {
                var IsTop = $(this).parent(".Single").prev(".Single").length == 0 ? true : false;  //检查是否是最顶端的歌曲
                var PrevSong;
                if (IsTop) {
                    PrevSong = $(".Single").last().children(".SongName").attr("KV");
                    $(".Single").last().children(".SongName").css("color", "#7A8093");
                }
                else {
                    PrevSong = $(this).parent(".Single").prev(".Single").children(".SongName").attr("KV");
                    $(this).parent(".Single").prev(".Single").children(".SongName").css("color", "#7A8093");
                }

audio.src = "Media/" + PrevSong + ".mp3";
                $(".MusicBox .ProcessControl .SongName").text(PrevSong);
                $(this).css("color", "#fff");
                audio.play();
                return false; //代表break
            }
        })
    });

//右前进按钮
    $(".RightControl").click(function () {
        $(".MusicList .List .Single .SongName").each(function () {
            if ($(this).css("color") == "rgb(122, 128, 147)") {
                var IsBottom = $(this).parent(".Single").next(".Single").length == 0 ? true : false;  //检查是否是最尾端的歌曲
                var NextSong;
                if (IsBottom) {
                    NextSong = $(".Single").first().children(".SongName").attr("KV");
                    $(".Single").first().children(".SongName").css("color", "#7A8093");
                }
                else {
                    NextSong = $(this).parent(".Single").next(".Single").children(".SongName").attr("KV");
                    $(this).parent(".Single").next(".Single").children(".SongName").css("color", "#7A8093");
                }

audio.src = "Media/" + NextSong + ".mp3";
                $(".MusicBox .ProcessControl .SongName").text(NextSong);
                $(this).css("color", "#fff");
                audio.play();
                return false; //代表break
            }
        })
    });

//静音按钮
    $(".VoiceEmp").click(function () {
        $(".VoidProcessYet").css("width", "0");
        audio.volume = 0;
    });

//满音量按钮
    $(".VoiceFull").click(function () {
        $(".VoidProcessYet").css("width", "66px");
        audio.volume = 1;
    });

/*
    之前一直考虑进度条的原理，这边进度条的做法启发自腾讯一款播放器的做法，采用两个2px高度的div，重叠，
    上面那个与下面那个div的颜色不一样，用于区分进度,顶层div的width是根据播放的长度来调整的，width越长，说明播放越长，
    知道上层的div完全覆盖下面的div，达到长度的一致，说明播放完毕。我们的播放进度条和音量进度条都是这样做的
    */

// 音频进度条事件（进度增加）
    $(".Process").click(function (e) {

//播放进度条的基准参数
        var Process = $(".Process").offset();
        var ProcessStart = Process.left;
        var ProcessLength = $(".Process").width();

var CurrentProces = e.clientX - ProcessStart;
        DurationProcessRange(CurrentProces / ProcessLength);
        $(".ProcessYet").css("width", CurrentProces);
    });

//音频进度条事件（进度减少）
    $(".ProcessYet").click(function (e) {

//播放进度条的基准参数
        var Process = $(".Process").offset();
        var ProcessStart = Process.left;
        var ProcessLength = $(".Process").width();

var CurrentProces = e.clientX - ProcessStart;
        DurationProcessRange(CurrentProces / ProcessLength);
        $(".ProcessYet").css("width", CurrentProces);
    });

//音量进度条事件（进度增加）
    $(".VoidProcess").click(function (e) {
        //音量进度条的基准参数
        var VoidProcess = $(".VoidProcess").offset();
        var VoidProcessStart = VoidProcess.left;
        var VoidProcessLength = $(".VoidProcess").width();

var CurrentProces = e.clientX - VoidProcessStart;
        VolumeProcessRange(CurrentProces / VoidProcessLength);
        $(".VoidProcessYet").css("width", CurrentProces);
    });

//音量进度条时间（进度减少）
    $(".VoidProcessYet").click(function (e) {
        //音量进度条的基准参数
        var VoidProcess = $(".VoidProcess").offset();
        var VoidProcessStart = VoidProcess.left;
        var VoidProcessLength = $(".VoidProcess").width();

var CurrentProces = e.clientX - VoidProcessStart;
        VolumeProcessRange(CurrentProces / VoidProcessLength);
        $(".VoidProcessYet").css("width", CurrentProces);
    });

//显示音乐列表事件
    $(".ShowMusicList").toggle(function () {
        $(".MusicList").show();

var MusicBoxRight = $(".MusicBox").offset().left + $(".MusicBox").width();
        var MusicBoxBottom = $(".MusicBox").offset().top + $(".MusicBox").height();
        $(".MusicList").css("left", MusicBoxRight - $(".MusicList").width());
        $(".MusicList").css("top", MusicBoxBottom + 15);
    }, function () {
        $(".MusicList").hide();
    });

//监听媒体文件结束的事件（ended），这边一首歌曲结束就读取下一首歌曲，实现播放上的循环播放
    audio.addEventListener(‘ended‘, function () {
        $(".MusicList .List .Single .SongName").each(function () {
            if ($(this).css("color") == "rgb(122, 128, 147)") {
                var IsBottom = $(this).parent(".Single").next(".Single").length == 0 ? true : false;  //检查是否是最尾端的歌曲
                var NextSong;
                if (IsBottom) {
                    NextSong = $(".Single").first().children(".SongName").attr("KV");
                    $(".Single").first().children(".SongName").css("color", "#7A8093");
                }
                else {
                    NextSong = $(this).parent(".Single").next(".Single").children(".SongName").attr("KV");
                    $(this).parent(".Single").next(".Single").children(".SongName").css("color", "#7A8093");
                }

audio.src = "Media/"+ NextSong + ".mp3";
                $(".MusicBox .ProcessControl .SongName").text(NextSong);
                $(this).css("color", "#fff");
                audio.play();
                return false; //代表break
            }
        });
    }, false);

});

//音量进度条的转变事件
function VolumeProcessRange(rangeVal) {
    var audio = document.getElementById("myMusic");
    audio.volume = parseFloat(rangeVal);
}

//播放进度条的转变事件
function DurationProcessRange(rangeVal) {
    var audio = document.getElementById("myMusic");
    audio.currentTime = rangeVal * audio.duration;
    audio.play();
}

//播放事件
function Play(obj) {
    var SongUrl = obj.getAttribute("SongUrl");
    var audio = document.getElementById("myMusic");
    audio.src = "Media/" + SongUrl + ".mp3";
    audio.play();
    TimeSpan();
}

//暂停事件
function Pause() {
    var audio = document.getElementById("myMusic");
    $("#PauseTime").val(audio.currentTime);
    audio.pause();
}

//继续播放事件
function Continue() {
    var audio = document.getElementById("myMusic");
    audio.startTime = $("PauseTime").val();
    audio.play();
}

//时间进度处理程序
function TimeSpan() {
    var audio = document.getElementById("myMusic");
    var ProcessYet = 0;
    setInterval(function () {
        var ProcessYet = (audio.currentTime / audio.duration) * 500;
        $(".ProcessYet").css("width", ProcessYet);
        var currentTime = timeDispose(audio.currentTime);
        var timeAll = timeDispose(TimeAll());
        $(".SongTime").html(currentTime + " | " + timeAll);
    }, 1000);
}

//时间处理，因为时间是以为单位算的，所以这边执行格式处理一下
function timeDispose(number) {
    var minute = parseInt(number / 60);
    var second = parseInt(number % 60);
    minute = minute >= 10 ? minute : "0" + minute;
    second = second >= 10 ? second : "0" + second;
    return minute + ":" + second;
}

//当前歌曲的总时间
function TimeAll() {
    var audio = document.getElementById("myMusic");
    return audio.duration;
}

//html//

<!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">
<head>
    <title>music</title>
    <script src="jquery-1.4.1.min.js" type="text/javascript" ></script>
    <script src="music.js" type="text/javascript" ></script>
    <link type="text/css" href="music.css" rel="Stylesheet" />
</head>
<body>

<audio id="myMusic" > </audio>
  <input id="PauseTime"  type="hidden" />

<div class="MusicBox" >
                    <div class="LeftControl" ></div>
                   <div id="MainControl" class="MainControl" ></div>
                    <div class="RightControl" ></div>
                 <div class="ProcessControl">
                             <div class="SongName">Blockly Music!</div>  <div class="SongTime">00:00&nbsp;|&nbsp;00:00</div>
                              <div class="Process" ></div>
                           <div class="ProcessYet"></div>
                 </div>

<div class="VoiceEmp"></div>
                <div class="VoidProcess" ></div>
                 <div class="VoidProcessYet" ></div>
                <div class="VoiceFull" ></div>
                <div class="ShowMusicList" >▽</div>
  </div>

<div class="MusicList">
              <div class="url" >也可以输入音乐url</div>
               <div class="List" >
                                <div class="Single" ><span class="SongName"   KV="情歌" >01.情歌</span> </div>
                                <div class="Single" ><span class="SongName"  KV="因为爱情">02.因为爱情</span> </div>
                                <div class="Single" ><span class="SongName"  KV="李克勤月半小夜曲">03.李克勤月半小夜曲</span> </div>
                                <div class="Single" ><span class="SongName"  KV="Beyond、黄家驹 - 喜欢你">04.Beyond、黄家驹 - 喜欢你</span> </div>
                                <div class="Single" ><span class="SongName"  KV="德国第一装甲师进行曲">05.德国第一装甲师进行曲</span> </div>
               </div>
  </div>

</body>
</html>
申明：本人小白  文章参考别人 并整合 经测试无问题  用于自勉学习 ！

时间： 2024-10-09 16:50:14

html5+css3 制作音乐播放器的相关文章

使用ivx制作音乐播放器的经验总结

今天我们要使用ivx制作一个音乐播放器,功能包括控制音乐的播放.暂停,能够通过点击或者拖拽调节音乐的播放进度,下面说一下具体的实现方法.一.demo布局首先看一下demo的结构,横幅下两个文本组件用于展示音乐信息,其余内容放置在画布中,布局上可以分为一个播放/暂停模块和一个进度条模块,分别放置在两个对象组中,另外还有一些变量.动作组和触发器.二.音乐组件既然是音乐播放器,自然就需要添加一个音乐组件啦.在素材资源地址里上传我们的音乐素材,这里注意一下如果音频素材比较大的话不建议开启预加载模式.三.

Android 音视频深入 十三 OpenSL ES 制作音乐播放器，能暂停和调整音量（附源码下载）

项目地址https://github.com/979451341/OpenSLAudio OpenSL ES 是基于NDK也就是c语言的底层开发音频的公开API,通过使用它能够做到标准化, 高性能,低响应时间的音频功能实现方法. 这次是使用OpenSL ES来做一个音乐播放器,它能够播放m4a.mp3文件,并能够暂停和调整音量 播放音乐需要做一些步骤1.创建声音引擎 首先创建声音引擎的对象接口 result = slCreateEngine(&engineObject, 0, NULL, 0,

html5，audio音乐播放器

终于,做了自己原来一直想要实现的事儿,得出的结果是,有些事儿一旦开始做了,那么它就并不是很难.现在的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是很好,但也请各位前辈担待一下我这个什么都不懂的菜鸟,也希望各位前辈积极地指正我的错误,小弟感激不尽! 正式内容前,可以先预览一下效果,http://xxyy.ahthw.com/myMusic/MyMusic.html (在这里,再次感谢王哥提供的服务器!) 本项目主要用到了html5的audio标签以及它所自带的方法和属性,

android 教你制作音乐播放器

呵呵,写之前我本人先笑了,欣赏一下我们清爽的界面吧~ 如果是只用activity来制作这样的东西简直是太小儿科了,此处我们当然用的是service 首先我们先上service的代码: 1.如果我们要访问service的属性和方法,那么在activity肯定是以bindservice的方法实现的,而在service中的onbind方法也是必须要实现的,onbind返回的Ibinder对象在activity的serviceconnection中得到使用. 2.activity获取到Ibinder对象

HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

HTML5之audio实战，网页音乐播放器开发

今天我们就基于 HTML5 audio  来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播放器了,对于 一个HTML 新元素,无非就是 属性.事件 .方法等等,关于audio 的具体的属性.事件 .方法,请谷歌. 看我们的HTML代码: audio.html <!DOCTYPE html> <html> <head> <meta charset="

基于我们3组的网易云APP制作，找的APlayer H5音乐播放器

APlayer是一个非常漂亮的HTML5音频播放器,UI参考自网易云音乐外链播放器.它将audio标签封装,并结合CSS制作出漂亮的播放器UI,它支持设置歌名.歌手和歌词,可以设置是否自动播放,支持缩略图,支持播放进度以及设置播放源. HTML 首先是要加载播放器样式文件,这个播放器的样式酷似网易云音乐播放器.接着载入APlayer.js文件.然后在body中加入播放器div#player1,用于显示播放.<link rel="stylesheet" href="APl

非常漂亮的HTML5音乐播放器

APlayer是一个非常漂亮的HTML5音频播放器,它将audio标签封装,并结合CSS制作出漂亮的播放器UI,它支持设置歌名.歌手和歌词,可以设置是否自动播放,支持缩略图,支持播放进度以及设置播放源. 查看演示 下载源码 HTML 首先是要加载播放器样式文件,这个播放器的样式酷似网易云音乐播放器.然后在body中加入播放器div#player1,待会要调用播放.接着载入APlayer.js文件. <link rel="stylesheet" href="APlayer

使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og