这里分享我最近写出来的一个小东西，基于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. Pandas 美国竞选捐赠案例

    import pandas as pd """ 需求 1.加载数据 2.查看数据的基本信息 3.指定数据截取,将如下字段的数据进行提取,其他数据舍弃 cand_nm: 候 ...

  2. nginx实战笔记

    1.添加一个虚拟机 /usr/local/nginx/sbin ./nginx -t nginx: [warn] conflicting server name "localhost&quo ...

  3. C++ STL学习

    C++ STL学习 目录 C++ STL学习 容器库概览 对可以保存在容器中的元素的限制 容器支持的操作 所有容器都支持的操作或容器成员 迭代器 迭代器的公共操作 迭代器的类型 迭代器的const属性 ...

  4. python定义类模块之attr

    # attr可以简单理解为namedtuple的增强版 import attr @attr.s class Point(object): x = attr.ib(default=1) # 定义默认参数 ...

  5. 简化Simulink的建模与模型重构

    简化Simulink的建模与模型重构 模型重构 Simulink作为汽车和自动化领域中经典的模型工程必备工具,不管是专业的汽车控制器的开发还是自动化控制的专业应用编程,都会使用到Simulink进行图 ...

  6. 骚操作之 持有 ReadOnlySpan 数据

    ReadOnlySpan<T> 可以说现在高性能操作的重要基石 其原理有兴趣的同学可以看 2018 的介绍Span<T>文章 其为了保障大家安全使用做了相应的限制 那么有没方法 ...

  7. 【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)

    问题描述 使用 .NET Azure.Identity 中的 DefaultAzureCredential 认证并连接到Azure Key Vault中, 在Key Vault 的示例中,并没有介绍如 ...

  8. 【Azure 事件中心】开启 Apache Flink 制造者 Producer 示例代码中的日志输出 （连接 Azure Event Hub Kafka 终结点）

    问题描述 Azure Event Hub 在标准版以上就默认启用的Kafka终结点,所以可以通过Apache Kafka协议连接到Event Hub进行消息的生产和消费.通过示例代码下载到本地运行后, ...

  9. Java 开发人员调度软件项目 (java基础编程总结项目)+javaBean+测试代码+数组知识+数据结构+继承+多态+封装+自定义异常，异常处理+构造器知识+重载+重写+接口+实现接口+关键字使用（static +equalsIgnoreCase+fianl+instanceof判断类型）+向下转型与向上转型

    /** * * @Description Java 开发人员调度软件项目 (java基础编程总结项目) * +javaBean+测试代码+数组知识+数据结构+继承+多态+封装+自定义异常,异常处理 * ...

  10. Java 多态 解释+案例

    1 package com.bytezreo.duotai; 2 /** 3 * 4 * @Description 面向对象的特征三 ------多态性 5 * @author Bytezero·zh ...