首先说明一点,此篇文章只是为了回应一些博友的要求,本人并非专业搞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的更多相关文章

  1. 前端(十七)—— jQuery基础:jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

  2. js轮播功能 标签自动切换 同页面多轮播js

    需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...

  3. 一步一步拆解一个简单的iOS轮播图(三图)

    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...

  4. viewPager+Handler+Timer简单实现广告轮播效果

    基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...

  5. 网站图片的轮播JS代码

    这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...

  6. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  7. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  8. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  9. 【原生JS】写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

随机推荐

  1. python setup.py install 报错:error: [WinError 3] 系统找不到指定的路径。: 'C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\VC\\PlatformSDK\\lib

    Outline 在通过 setup.py 安装python模块时,遇到了以下报错: # 执行 python setup.py install # 报错: error: [WinError 3] 系统找 ...

  2. Java I/O(一) NIO概述

    基本概念 BIO:是堵塞I/O,无论是磁盘I/O,还是网络I/O,数据在写入OutputStream和InputStream都可能发生堵塞,一旦有堵塞,线程会失去CPU的使用权(堵塞). NIO:简单 ...

  3. CodeForces 215B Olympic Medal(数学啊)

    题目链接:http://codeforces.com/problemset/problem/215/B Description The World Programming Olympics Medal ...

  4. python selenium 下载安装(一)

    1. python安装地址:https://www.python.org/downloads/windows/ 2. 下载想要安装的版本,建议3.5,3.6版本  3. 安装一路下一步(也可自定义安装 ...

  5. 006-HotSpot JVM收集器

    一.概述 1.1.图解 上面有7中收集器,分为两块,上面为新生代收集器,下面是老年代收集器.如果两个收集器之间存在连线,就说明它们可以搭配使用. JVM给出了3类选择:串行收集器.并行收集器.并发收集 ...

  6. vim 设置 颜色值

    编辑~/.vimrc文件,添加 set t_Co=8 t_Co即terminal Color之意 注意,将 t_Co 设置为256 (或8以外的所有值) 时,mark 的显示不是很正常.

  7. phpcms 列表页中,如何调用其下的所有子栏目?

    {pc:content action="category" catid="$catid" num="99" order="list ...

  8. php采集

    采集思路   采集程序的思路很简单大体可以分为以下几个步骤: 1. 获取远程文件源代码(file_get_contents或用fopen).    2.分析代码得到自己想要的内容(这里用正则匹配,一般 ...

  9. CNN学习笔记:正则化缓解过拟合

    CNN学习笔记:正则化缓解过拟合 过拟合现象 在下图中,虽然绿线完美的匹配训练数据,但太过依赖,并且与黑线相比,对于新的测试数据上会具有更高的错误率.虽然这个模型在训练数据集上的正确率很高,但这个模型 ...

  10. HDU - 3829 Cat VS Dog (二分图最大独立集)

    题意:P个小朋友,每个人有喜欢的动物和讨厌的动物.留下喜欢的动物并且拿掉讨厌的动物,这个小朋友就会开心.问最多有几个小朋友能开心. 分析:对于每个动物来说,可能既有人喜欢又有人讨厌,那么这样的动物实际 ...