html代码

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


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

js代码

  1. var myAudio = document.getElementById('audio1');
  2. function playPause(){
  3. if(myAudio.paused){
  4. myAudio.play();
  5. }else{
  6. myAudio.pause();
  7. }
  8. }

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. 连接数据库的url

    mysql: jdbc:mysql://localhost:3306:test这句里面分如下解析:jdbc:mysql:// 是指JDBC连接方式:localhost: 是指你的本机地址:3306 S ...

  2. office 2016

    Excel 2016: F4  : 重复上一步操作. 例子: 如果上一步是合并单元格, 则 再次选中其他几个单元格, F4即再次完成合并. 单元格中插入对角线: 选中单元格, 右键--设置单元格格式- ...

  3. Java面向对象编程 -3.2

    使用this调用本类方法 除了调用属性之外,this也可以实现方法的调用,但是对于方法的调用就必须考虑构造与普通方法 构造方法调用(this()):使用关键字new实例化对象的时候才会调用构造方法: ...

  4. nikic / PHP-Parser 包的简单实用

    解析PHP文件: <?php require 'vendor/autoload.php'; use PhpParser\ParserFactory; $code = file_get_conte ...

  5. 关于编译QT官方的MQTT库.

    先放一位博主的资料,参阅了其中资料,表示感谢: https://www.cnblogs.com/yexiaopeng/p/8542894.html ########################## ...

  6. spriteKit简单学习

    https://shimo.im/docs/YejitfPrGkcNO3Ls/ <SpriteKit学习相关> 关于SpriteKit   https://www.jianshu.com/ ...

  7. hdoj6703 2019 CCPC网络选拔赛 1002 array

    题意 description You are given an array a1,a2,...,an(∀i∈[1,n],1≤ai≤n). Initially, each element of the ...

  8. Java中对于ClassLoader类加载器 嵌套了深度技术的价值

    关于Java技术是一种不断兴起的编程语言,对于ClassLoader 是 Java 届最为神秘的技术之一,无数人被它伤透了脑筋,摸不清门道究竟在哪里.本文我带你彻底吃透 ClassLoader,让你甚 ...

  9. js运动框架及应用

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

  10. Spring boot 启动图片

    生成工具:http://patorjk.com/software/taag/#p=testall&h=0&v=0&f=Graffiti&t=Type%20Somethi ...