简单的音乐轮播JS
首先说明一点,此篇文章只是为了回应一些博友的要求,本人并非专业搞js的,所以键盘侠和各路大神如果看到此文还请轻喷或者可以直接关掉页面~
直接上代码:
<div id="myboot"><audio id="mp3" controls="controls"></audio></div>
<script type="text/javascript">
var myAudio = document.getElementById('mp3');
window.onload = function () {
var arr = [//这里放你的音乐外链就可以了
"http://t.cn/RDE1jdk?mp3",
"http://t.cn/RDE1Y2D?mp3"
];
myAudio.preload = true;
myAudio.controls = true;
var a = arr.pop();
arr.unshift(a)
myAudio.src = a; //每次读数组最后一个元素
myAudio.addEventListener('ended', playEndedHandler, false);
myAudio.loop = false;//禁止循环,否则无法触发ended事件
function playEndedHandler() {
var a = arr.pop();
arr.unshift(a)
myAudio.src = a;
myAudio.play();
}
}
</script>
实现方式比较简单,有些代码常识的基本都能看懂,主要应用的也就是audio标签的一些api,利用数组的pop和unshift方法实现轮播,因为一些浏览器进制进入页面时自动播放音乐,会出现报错,而且我感觉也没有太大必要所以就没再去研究。之前倒是一直纠结一件事。如何做到异步播放音乐,保证页面刷新的时候音乐播放不受影响,想过iframe实现,但是木有成功... 如果有大神有好的想法,希望提出分享~
简单的音乐轮播JS的更多相关文章
- 前端(十七)—— jQuery基础:jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图
jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...
- js轮播功能 标签自动切换 同页面多轮播js
需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...
- 一步一步拆解一个简单的iOS轮播图(三图)
导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...
- viewPager+Handler+Timer简单实现广告轮播效果
基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...
- 网站图片的轮播JS代码
这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 【原生JS】写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
随机推荐
- 中间件MQ选型要点
转载自: https://www.cnblogs.com/doit8791/p/10227474.html 参考: http://www.52im.net/thread-1647-1-1.html ...
- Java 面向对象编程介绍
面向对象的概念 类与对象的关系 封装 面向对象 面向过程: 强调的是过程(动作) 面向对象: 强调的是对象(实体) 面向对象的特点 面向对象就是一种常见的思想,符合人们的思考习惯; 面向对象的出现,将 ...
- 最全的Eclipse使用快捷键
Eclipse 是一种基于 Java 的可扩展开源开发平台.尽管 Eclipse 是使用 Java 语言开发的,但它的用途并不限于 Java 语言,Eclipse 还包括插件开发环境等,下面将为大家介 ...
- Django的model模型
一:字段选项 1,null =True 表示数据库的中可以存为null 默认值是False 2,blank=True 表示字段可以为空 默认值是False 3,chioces 由二项元组构成的一 ...
- 安全必须作为基础,融入到产品开发过程——By Me
安全必须作为基础融入,让公司兄弟姐妹具备足够的安全意识,且逐渐具备必要的安全经验,带着安全思维去执行产品的架构设计.研发.测试.运维(甚至完整的产品生命周期),这是一种有远见.负责人的产品过程!! 下 ...
- 【Spring MVC】spring mvc中相同的url请求返回不同的结果
在项目中凡是使用Spring MVC这种控制器的,大多都是返回JSON数据对象,或者JSP页面. 但是相同的URL请求如何让他自动的选择放回的是什么? 在这里有由于鄙人没有亲自测试过,就不敢乱贴代码, ...
- 使用Free命令查看Linux服务器内存使用状况(-/+ buffers/cache详解)
free命令可选参数 -b,-k,-m,-g show output in bytes, KB, MB, or GB -h human readable output (automatic unit ...
- Jupyter Notebook修改目标文件
默认的路径 如果没有修改配置文件,那么一般就在用户目录下面: 下面各处默认起始目标地址,以防有一天想改回来 I:\shujufenxi\python.exe I:\shujufenxi\cwp.py ...
- mysql数据库存储过程数据迁移案例与比较
cursor 与 insert ...select 对比: cursor:安全,不会造成死锁,可以在服务运行阶段跑,比较稳定. insert...select :速度快,但是可能造成死锁,相比curs ...
- PHP preg_replace
preg_replace (PHP 3 >= 3.0.9, PHP 4, PHP 5) preg_replace -- 执行正则表达式的搜索和替换 说明 mixed preg_replace ( ...