html代码

<audio  id="myaudio" src="http://ws.stream.qqmusic.qq.com/C100003R74Cn0JR4O6.m4a?fromtag=0" controls="controls">
   </audio>


<button onclick="playPause()">播放/暂停</button>
<audio id="audio1" width="420" >
<source src="example.mp4" type="audio/mp4" />
<source src="example.ogg" type="audio/ogg" />
</audio>

js代码

var myAudio = document.getElementById('audio1');
function playPause(){
if(myAudio.paused){
myAudio.play();
}else{
myAudio.pause();
}
}

Html5使用audio播放音乐的更多相关文章

  1. HTML5 ——web audio API 音乐可视化(二)

    上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...

  2. HTML5 Video/Audio播放本地文件

    这段时间经常看到开发者在反复询问同一个问题,为什么通过设置src属性,不能播放本地的媒体文件?例如video.src=”D:\test.mp4”. 这是因为浏览器中的JavaScript不能直接直接访 ...

  3. js audio 播放音乐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. HTML5 ——web audio API 音乐可视化(一)

    使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...

  5. ios vue2.0使用html5中的audio标签不能播放音乐

    我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...

  6. html5,audio音乐播放器

    最终,做了自己原来一直想要实现的事儿.得出的结果是,有些事儿一旦開始做了,那么它就并非非常难. 如今的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是非常好.但也请各 ...

  7. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  8. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

  9. html5的audio实现高仿微信语音播放效果

    效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...

随机推荐

  1. 请高手解释这个C#程序,其中ServiceBase是windows服务基类,SmsService是

    请高手解释这个C#程序,其中ServiceBase是windows服务基类,SmsService是 ServiceBase的子类. static void Main() { ServiceBase[] ...

  2. 利用 Jenkins 持续集成 iOS 项目,搭建自动化打包环境

    ---恢复内容开始--- jenkins是一个广泛用于持续构建的可视化web工具,持续构建即各种项目的”自动化”编译.打包.分发部署.jenkins可以很好的支持各种语言(比如:Java, c#, P ...

  3. case语句!

    1.case 语句概述(1)case 语句的作用使用 case 语句改写 if 多分支可以使脚本结构更加清晰.层次分明.针对变量的不同取值,执行不同的命令序列.2.case 语句的结构:case 变量 ...

  4. linux操作系统及内核

    自己的一点总结,把知识重新编码~ 一.操作系统概述 在Richard Stevens的unix环境高级编程中这样定义“它控制计算机硬件资源,提供程序运行环境.一般而言我们称这种软件为内核(kernel ...

  5. JavaScript高级特征之面向对象笔记

    Javascript面向对象 函数 * Arguments对象: * Arguments对象是数组对象 * Arguments对象的length属性可以获取参数的个数 * 利用Arguments对象模 ...

  6. WPS 2019文档编辑 技巧

    wps2019文档怎么设置粘贴时自动匹配当前的格式: 菜单栏 文件 -- 选项 -- 编辑 -- 默认粘贴方式 设置为 匹配当前格式. 在编辑文档左侧或右侧显示/隐藏 目录/书签: 视图 -- 导航窗 ...

  7. 【原】python常用模块

    1.os模块 对操作系统中文件/目录等进行操作 2.sys模块 对python版本进行操作 3.正则re模块 4.datetime,date,time模块 5.hashlib,md5模块 hashli ...

  8. Python学习笔记005

    if if     ==    : xxxx elif     : xxxx else: xxxx 输入字符串 input() 字符串转数值 int() 数值转字符串 str() 输出 print() ...

  9. Codeforces Round #588 (Div. 2)C(思维,暴力)

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int a[27],b[27];int vis ...

  10. postInvalidate 解决View.GONE,没有刷新的问题

    问题描述:布局: <ScrollView id="scroll"> <LinearLayout id="container"> < ...