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. GO面向接口

    Go 语言提供了另外一种数据类型即接口,它把所有的具有共性的方法定义在一起,任何其他类型只要实现了这些方法就是实现了这个接口. 实例 实例 /* 定义接口 */ type interface_name ...

  2. java 抛出异常与finally的混用对于语句块的执行顺序的影响

    代码如下: package test1; public class EmbededFinally { public static void main(String args[]) { int resu ...

  3. JavaScript中关于隐式转换的一些总结

    JavaScript运算符中的隐式转换规律:一.递增递减运算符(前置.后置)1.如果包含的是有效数字字符串或者是有效浮点数字符串,则会将字符串转换(Number())为数值,再进行加减操作,返回值的类 ...

  4. mysql yum源安装极速

    mysql yum源地址:https://dev.mysql.com/downloads/repo/yum/ 随便找个最新的不管你是要装任何个历史版本他都可以,后面我会介绍: 安装第一步预置环境清理: ...

  5. Python第五十一天 python2升级为python3

    Python第五十一天  python2升级为python3 公司使用的生产环境系统是centos7,所以这里以centos7系统为基础,讲解将python2升级为python3的方法 centos7 ...

  6. c#DDOS代码

    //在工程属性中设置"允许不安全代码"为true ?using System; using System.Net; using System.Net.Sockets; using ...

  7. ios中使用socket实现聊天

    [iOS]SocketRocket简单实现聊天室功能 https://www.jianshu.com/p/db34940f1135      CocoaAsyncSocket   https://gi ...

  8. js学习:基本语法结构

    语句 JavaScript 程序的执行单位为行(line),也就是一行一行地执行.一般情况下,每一行就是一个语句. 语句(statement)是为了完成某种任务而进行的操作,比如下面就是一行赋值语句. ...

  9. 什么是redis事务

    一.什么是redis事务? 可以一次性执行多条命令,本质上是一组命令的集合.一个事务中的所有命令都会序列化,然后按顺序地串行化执行,而不会被插入其他命令 二.Redis 事务可以做什么? 一个队列中, ...

  10. selenium webdriver 屏幕滚动

    //山寨法 String setscroll = "document.documentElement.scrollTop=100"; JavascriptExecutor jse= ...