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. ETCD监控

    Watch key changes Applications can watch on a key or a range of keys to monitor for any updates. Her ...

  2. java 类型转换一些相关问题

    猜测:第二句 第四句会出错 结果是第二句和第四句会出错.说明了父类可以向子类类型转换,而不同的子类直接不能类型转换.

  3. 再次立个flag

    今天2019.9.18 从上次迷茫到现在,差不多过去快一年了.   准确点是 442 天 我顺便大概看了一下上次迷茫时期的日志,总觉的不可思议.上次是毕业大概几个月,到目前其实也没多久,但是我变了.. ...

  4. MySQL高可用之MHA配置

    本文简单介绍了MySQL的高可用实现方式之一的MHA MHA:Master High Availability,对主节点进行监控,可实现自动故障转移至其它从节点:通过提升某一从节点为新的主节点,基于主 ...

  5. 洛谷 P1082 同余方程(同余&&exgcd)

    嗯... 题目链接:https://www.luogu.org/problem/P1082 这道题很明显涉及到了同余和exgcd的问题,下面推导一下: 首先证明有解情况: ax + by = m有解的 ...

  6. CSS的响应式布局

    响应式布局是什么 它是相对于固定像素大小的网页而言的,顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献给用户. 如何实现响应式布局? 1.CSS3@media查询 ...

  7. 单元测试及框架简介 --junit、jmock、mockito、powermock的简单使用

    转 单元测试及框架简介 --junit.jmock.mockito.powermock的简单使用 2013年08月28日 14:33:06 luvinahlc 阅读数:6413 标签: 测试工具单元测 ...

  8. UICollectionView特殊布局

    流式http://www.code4app.com/thread-30894-1-1.html 美团http://www.code4app.com/thread-30930-1-1.html 复杂布局 ...

  9. Session共享解决方案

    使用nginx做的负载均衡添加一个ip_hash配置 一.开两个Tomcat写测试程序 @WebServlet("/nginxSessionServlet") public cla ...

  10. tensorflow变量的使用(02-2)

    import tensorflow as tf x=tf.Variable([1,2]) a=tf.constant([3,3]) sub=tf.subtract(x,a) #增加一个减法op add ...