<html>
<head>
<title>这种方式支持任何浏览器</title>
</head>
<body>
<div id="div1"></div>
<input type="button" value="立即" onclick="play_click(this,'短歌.mp3');">
<div id="div2"></div>
<script language="javascript">
function play_click(sef, url) {
var div = document.getElementById('div1');
div.innerHTML = '<embed src="' + url + '" loop="0" autostart="true" hidden="true"></embed>';
var emb = document.getElementsByTagName('EMBED')[0];
if (emb) {
/* 这里可以写成一个判断 wav 文件是否已加载完毕，以下采用setTimeout模拟一下 */
div = document.getElementById('div2');
div.innerHTML = 'loading: ' + emb.src;
sef.disabled = true;
setTimeout(function () { div.innerHTML = ''; }, 1000);
}
}
</script>
</body>
</html>

js 实现音乐播放的更多相关文章

  1. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  2. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  3. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

  4. html5 js控制音乐播放

      <!DOCTYPE HTML><html><head><meta charset="UTF-8"><script lang ...

  5. react.js 实现音乐播放、下一曲、以及删除歌曲（仅播放列表）

    import React, { Component } from 'react'; export default class Music extends Component {   construct ...

  6. 10个免费开源的JS音乐播放器插件

    点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

  7. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  9. 每天看一片代码系列（三）：codepen上一个音乐播放器的实现

    今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子,效果还是很赞的: codePen地址 HTML部分 首先我们要思考一下,一个播放器主要包含哪些元素.首先要有播放的进度信息,还有播放 ...

随机推荐

  1. UITableView常用属性和方法 - 永不退缩的小白菜

    UITableView常用属性和方法 - 永不退缩的小白菜 时间 2014-05-27 01:21:00  博客园精华区原文  http://www.cnblogs.com/zhaofucheng11 ...

  2. 如何用js检测手机是否安装某个app

    问题描述 如果本地安装了app那么直接打开,否则苹果要跳转到app-store,安卓则要跳到对应的市场 解决方案 一 //html代码中 的 a 标签,以微信为例,默认的是调用weixin schem ...

  3. 深入理解7816（2）---关于ATR

    智能卡(此处主要指接触式CPU卡)本身始终处于被动的状态,所以终端设备在和智能卡进行数据交互的时候,需要首先给智能卡发指令,智能卡才会对应地给出应答.而智能卡告诉终端的第一句话就是ATR,亦即“复位应 ...

  4. Linux watch 命令

    man watch: WATCH(1) Linux User's Manual WATCH(1) NAME watch - execute a program periodically, showin ...

  5. （转） Linux的capability深入分析（2）

    一)capability的工具介绍   在我们的试验环境是RHEL6,libcap-2.16软件包中包含了相关的capability设置及查看工作,如下:   rpm -ql libcap-2.16- ...

  6. Android 对话框简介

    对话框(Dialog)是程序运行过程中弹出的窗口,Android中有好多种对话框,如警告对话框,进度对话框,列表对话框,单选对话框,日期选择对话框,时间选择对话框等: 下面用几个例子来演示一下各种对话 ...

  7. Temporary failure in name resolution

    公司搬家,在一台测试机上执行git clone,出现错误 ssh: Could not resolve hostname **: Temporary failure in name resolutio ...

  8. 关于maven-jetty-plugin 自动重启问题

    <plugin> <groupId>org.mortbay.jetty</groupId> <artifactId>maven-jetty-plugin ...

  9. hdu 5313 Bipartite Graph（dfs染色 或者 并查集）

    Problem Description Soda has a bipartite graph with n vertices and m undirected edges. Now he wants ...

  10. ubuntu14.04 + cocos2d-x-3.6 + eclipse发布android

    cocos2d-x-2.2.6版本 :http://www.cnblogs.com/weishuan/p/4698470.html 接下来是3.6了 ,准备好下面四个东东,我把这些都放在XXX/App ...