简单的音乐轮播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" ...
随机推荐
- 看用Tornado如何自定义实现表单验证
我们知道,平时在登陆某个网站或软件时,网站对于你输入的内容是有要求的,并且会对你输入的错误内容有提示,对于Django这种大而全的web框架,是提供了form表单验证功能,但是对于Tornado而言, ...
- JQuery操作select中的option
html页面代码例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- Springboot入门-日志框架配置(转载)
默认情况下,Spring Boot会用Logback来记录日志,并用INFO级别输出到控制台. Logback是log4j框架的作者开发的新一代日志框架,它效率更高.能够适应诸多的运行环境,同时天然支 ...
- 批量编译目录下文件的Makefile
1.多C文件生成各自可执行文件的Makefile如果一个目录下有很多C文件,且每个C文件都能生成一个独立的可执行文件,那么想全编译这些C文件并生成各作的可执行文件,在该目录下编写一个Makefile文 ...
- iOS学习之二维码扫描
这几天刚好将本人高仿新浪微博的事情进行一个阶段性的tag,在此也将这个项目在实现二维码扫描这个功能来做一个简要的记录.关于高仿新浪微博的源代码,本人已经将全部代码托管到github,地址在这里.欢迎大 ...
- python全栈开发从入门到放弃之列表的内置方法
1.列表切片 l=['a','b','c','d','e','f'] print(l[1:5]) # 根据索引号来切片,但顾头不顾尾 ['b', 'c', 'd', 'e'] print(l[1:5: ...
- 数据结构&算法(一)_堆、栈(堆栈)、队列、链表
堆: ①堆通常是一个可以被看做一棵树的数组对象.堆总是满足下列性质: ·堆中某个节点的值总是不大于或不小于其父节点的值: ·堆总是一棵完全二叉树.将根节点最大的堆叫做最大堆或大根堆,根节点最小的堆叫做 ...
- Jmeter使用非 GUI 模式,即命令行模式运行实例讲
转载:http://www.cnblogs.com/leeboke/p/5238269.html 参考资料:https://girliemangalo.wordpress.com/2009/10/29 ...
- Sybase:游标用法以及嵌套用法
Sybase:游标用法以及嵌套用法 游标示例一: --Sybase游标示例一: create PROCEDURE DBA.p_proc_test() ON EXCEPTION RESUME begin ...
- 外部类与main方法笔记
外部类 1. 外部public class只能有一个 2. 外部类只能有两种访问控制级别: public 和默认 3. 一个文件中,可以有多个public class,即外部类为public,还可以有 ...