这里分享我最近写出来的一个小东西，基于jq的音乐播放器，可以嵌套到网站

效果截图：

具体首页代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1" />

	<title></title>

	<link rel="stylesheet" href="css/player.css">

</head>

<body>

<div id="QPlayer">

<div id="pContent">

	<div id="player">

		<span class="cover"></span>

		<div class="ctrl">

			<div class="musicTag marquee">

				<strong>Title</strong>

				 <span> - </span>

				<span class="artist">Artist</span>

			</div>

			<div class="progress">

				<div class="timer left">0:00</div>

				<div class="contr">

					<div class="rewind icon"></div>

					<div class="playback icon" id="play-btn"></div>

					<div class="fastforward icon"></div>

				</div>

				<div class="right">

					<div class="liebiao icon"></div>

				</div>

			</div>

		</div>

	</div>

	<div class="ssBtn">

	        <div class="adf"></div>

    </div>

</div>

<ol id="playlist"></ol>

</div>

<script src="js/jquery.min.js"></script>

<script src="js/jquery.marquee.min.js"></script>

<script>

	var	playlist = [

		{title:"万象霜天",artist:"三无MarBlue",mp3:"music/万象霜天.mp3",cover:"music/万象霜天.png",}

	];

    var isRotate = true;

    var autoplay = true;

</script>

<script src="js/player.js"></script>

<script>

	function bgChange(){

		var lis= $('.lib');

		for(var i=0; i<lis.length; i+=2)

		lis[i].style.background = 'rgba(246, 246, 246, 0.5)';

	}

	window.onload = bgChange;

	setTimeout(()=>{

		$("#play-btn").click()

	},2000)

	setTimeout(()=>{

		$("#play-btn").click()

	},4000)

</script>

</body>

</html>

整体下载：点击下载

下载后本地打开即可

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

JQ实现音乐插件并自动播放的更多相关文章

  1. Android播播放完SD卡指定文件夹音乐之后，自动播放下一首

    最近做一个项目,需要连续播放音乐,播放完一首歌之后,自动播放完下一首歌.不要重复播放. 代码如下: package com.example.asyncplayer_ex; import java.io ...

  2. 微信中音乐播放在ios不能自动播放解决

    在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...

  3. 关于微信H5页面开发中音乐不自动播放的解决方法

    我想应该有很多人在做H5场景应用.H5微刊.H5微杂志的时候加入背景音乐吧(客户需求),相信很多人一定碰过不能自动播放的时候,即使是相同的iPhone 5s也有不播放的时候,很蛋疼吧!? 之前我的解决 ...

  4. jQuery可自动播放动画焦点图插件Koala

    Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放.该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图 ...

  5. iOS下Audio自动播放(Autoplay)音乐

    前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay就没在意. 完了在手机上测试,发现手机上打开页面死活就是不会自动播放,点击播放按钮才可以播放,很是纠结 ...

  6. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 解决 iPhone 微信 H5 无法自动播放音乐问题

    使用 wx sdk 在html导入sdk js文件.(如果网站是https导入的sdk也要使用https!) 然后在 wx.ready 中设置 play 方法并复制给全局变量 fm,当需要使用的时候再 ...

  8. ios设置音乐audio自动播放

    因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...

  9. H5音乐自动播放ios//禁止安卓手机图片点击

    定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24 ...

  10. [HTML]音乐自动播放（兼容微信）

    文件下载:音乐自动播放(兼容微信).zip   <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

随机推荐

  1. NC16679 [NOIP2003]神经网络

    题目链接 题目 题目描述 人工神经网络(Artificial Neural Network)是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷款风险评估等诸多领域有广泛的应用.对神经网络 ...

  2. 大米新闻微信小程序和Springboot新闻管理系统项目源码

    介绍 本项目分为大米news小程序端和springboot新闻管理系统后台项目.小程序主要用来新闻展示,后台管理系统用于提供相关新闻API. 项目源码 参考:https://www.bilibili. ...

  3. Encrypt or Decrypt sensitive data using PLSQL - DBMS_CRYPTO

    Oracle 10g introduced Transparent Data Encryption, which is about storing data physically as encrypt ...

  4. OpenCV开发笔记（五十七）：红胖子8分钟带你深入了解直方图反向投影（图文并茂+浅显易懂+程序源码）

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  5. EXE程序缺DLL怎么办

    起因 工程师发给用户一个VS编译的windows应用程序,客户反应打不开,报缺少dll.可是dll明明就在当前目录啊,为什么还会报错呢? 那应该是该DLL依赖的其它DLL不存在导致的,用depends ...

  6. 基于Vue（提供Vue2/Vue3版本）和.Net Core前后端分离、强大、跨平台的快速开发框架

    前言 今天大姚给大家推荐一款基于Vue(提供Vue2/Vue3版本)和.Net Core前后端分离.开源免费(MIT License).强大.跨平台的快速开发框架,并且框架内置代码生成器(解决重复性工 ...

  7. 第129篇:JS模块化开发

    好家伙,本篇为<JS高级程序设计>第二十六章"模块"学习笔记 JS开发会遇到代码量大和广泛使用第三方库的问题. 解决这个问题的方案通 常需要把代码拆分成很多部分,然后再 ...

  8. 数据结构(三):舞伴配对问题(C++，队列)

    好家伙, 题目如下: 1.舞伴配对问题:假设在周末舞会上,男士们和女士们进入舞厅时,各自排成一队.跳舞开始时,依次从男队和女队的队头上各出一人配成舞伴. 2.若两队初始人数不相同,则较长的那一队中未配 ...

  9. 三: MySQL的数据目录

    # MySQL的数据目录 1. MySQL8的主要目录结构 1.1 数据库文件的存放路径 MySQL数据库文件的存放路径:/var/lib/mysql/ MySQL服务器程序在启动时会到文件系统的某个 ...

  10. C语言之牛必克拉斯 main() 函数

    C语言之main()函数 C程序最大的特点就是所有的程序都是用函数来装配的.main()称之为主函数,是所有程序运行的入口.其余函数分为有参或无参两种,均由main()函数或其它一般函数调用,若调用的 ...