Html5使用audio播放音乐
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播放音乐的更多相关文章
- HTML5 ——web audio API 音乐可视化(二)
上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...
- HTML5 Video/Audio播放本地文件
这段时间经常看到开发者在反复询问同一个问题,为什么通过设置src属性,不能播放本地的媒体文件?例如video.src=”D:\test.mp4”. 这是因为浏览器中的JavaScript不能直接直接访 ...
- js audio 播放音乐
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5 ——web audio API 音乐可视化(一)
使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...
- ios vue2.0使用html5中的audio标签不能播放音乐
我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...
- html5,audio音乐播放器
最终,做了自己原来一直想要实现的事儿.得出的结果是,有些事儿一旦開始做了,那么它就并非非常难. 如今的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是非常好.但也请各 ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- html5 audio标签切换播放音乐的方法
html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...
- html5的audio实现高仿微信语音播放效果
效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...
随机推荐
- 洛谷P1991 无线通讯网(最小生成树性质+连通块)
题目描述 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络: 每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话. 任意两个配备了一条卫星电话线路的哨所(两边都 ...
- C++11特性中基于范围的for循环
本文摘录柳神笔记: 除了像C语⾔的for语句 for (i = 0; i < arr.size(); i++) 这样,C++11标准还为C++添加了⼀种新的 for 循环⽅ 式,叫做基于范围 ...
- Codeforces Round #600 (Div. 2) - D. Harmonious Graph(并查集)
题意:对于一张图,如果$a$与$b$连通,则对于任意的$c(a<c<b)$都有$a$与$c$连通,则称该图为和谐图,现在给你一张图,问你最少添加多少条边使图变为和谐图. 思路:将一个连通块 ...
- RestTemplate的异常 Not enough variables available to expand
当使用 RestTemplate 可能会遇到异常: Not enough variables available to expand 典型如下: @Autowired private RestTemp ...
- 融资拿钱----HHR计划---第四课
第一节:开始学习 1,预热思考题: (1)投资人愿意投你?你想过你的投资逻辑是什么吗?(赚钱=行业天花板*成功的概率=细分行业天花板*集中度*whynow*whyme) (2)融资就是为了拿钱吗?你了 ...
- SpringMvc 视图解析器常见功能、类型转换、格式化
springmvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...
- 第3节 Scala中的模式匹配:1 - 5
7. 模式匹配和样例类 Scala有一个十分强大的模式匹配机制,可以应用到很多场合:如switch语句.类型检查等.并且Scala还提供了样例类,对模式匹配进行了优化,可以快速进行匹配. 7.1 ...
- Linux命令:ss命令
ss功能:用来显示套接字信息的,类似于netstat,可以显示更多的信息,用于替代netstat. ss常用选项 ss -t:tcp协议的连接 -u:udp协议的链接 -w:裸套接字相关 -x:uni ...
- 工作脚本拆分xml文并重定向数据
sed -n '/<N/p' CM-ENB-SRVIDENTIFYBASEBSRTDD-2C-ALLV2.9.0-20191209020003.xml.gz.xml|awk -F"&g ...
- (转)js实现倒计时效果(年月日时分秒)
原文链接:http://mengqing.org/archives/js-countdown.html 之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用.(用的是张鑫旭写的一个倒计时,稍作 ...