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. python下matplotlib的subplot的多图显示位置的问题

    1.说明 1.1 多图: 221,222 212 ------------附最后讲解,这下更清楚了吧,取个名字:颠倒一下--- 1.2 多图 211 223,224 ------------附最后讲解 ...

  2. 手机远控SpyNote教程+软件

    链接:https://pan.baidu.com/s/1q0VVSxK0DCJk2VnOg5RgOA 提取码:1okp 生成一个小马界面.可以看到,和以往的远控一样,做好端口映射,定制图标,包名,版本 ...

  3. lc 0219

    目录 ✅ 463. 岛屿的周长 描述 解答 cpp py ✅ 1122. 数组的相对排序 描述 解答 cpp py ✅ 876. 链表的中间结点 描述 解答 cpp ✅ 1160. 拼写单词 描述 解 ...

  4. __str__()方法和__repr__()方法

    有时候我们想让屏幕打印的结果不是对象的内存地址,而是它的值或者其他可以自定义的东西,以便更直观地显示对象内容,可以通过在该对象的类中创建或修改__str__()或__repr__()方法来实现(显示对 ...

  5. 三级联动的区域选择器 iOS组件

    在iOS开发中,多级联动选择器非常常见,一般用于条件筛选,区域选择等. 实现了一个找房 APP 的筛选功能,效果如下: 代码如下:https://github.com/zhangtibin/Condi ...

  6. 使用Shiro实现认证和授权(基于SpringBoot)

    Apache Shiro是一个功能强大且易于使用的Java安全框架,它为开发人员提供了一种直观,全面的身份验证,授权,加密和会话管理解决方案.下面是在SpringBoot中使用Shiro进行认证和授权 ...

  7. Python使用pyautogui控制鼠标键盘

    官方文档:https://pyautogui.readthedocs.io/en/latest/# 安装pyautogui模块 在 Windows 上,不需要安装其他模块. 在 OS X 上,运行 s ...

  8. Spring报错汇总笔记

    报错信息: org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exception parsing X ...

  9. Mongodb - 解决 ( aggregate聚合管道 ) $match 根据 id 匹配 返回 [ ] 的问题

    需要对 id 进行转换 const mongoose = require('mongoose') var ObjectId = mongoose.Types.ObjectId;   await Use ...

  10. Java解析Json字符串--数组或列表

    Json示例: [ { "age": 25, "gender": "female", "grades": "三 ...