html - html5 audio 音乐自动播放,循环播放等

转自:http://blog.csdn.net/u012246458/article/details/50618759

audio播放音乐

[java] view plain copy

  1. <audio id="audio" src="images/openspeech.mp3" style="opacity:0" preload="auto" controls loop hidden="true"/>

这段代码是:可做背景音乐

页面加载加载音乐但是不播放

通过调用这段代码:

[java] view plain copy

  1. var myAuto = document.getElementById(‘audio‘);
  2. myAuto.play();

音乐播放。

其它属性解释:

    • preload: 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
    • autoplay: 如果出现该属性,则音频在就绪后马上播放。代码:autoplay="autoplay" ,也可以用:autoplay="true"
    • controls: 如果出现该属性,则向用户显示控件,比如播放按钮。
    • loop: 如果出现该属性,则每当音频结束时重新开始播放。
    • hidden: 隐藏播放界面
时间: 2024-10-07 19:24:34

html - html5 audio 音乐自动播放,循环播放等的相关文章

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

HTML5实现两个视频循环播放!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Js控制HTML5 Audio 音乐播放和关闭

参考W3C详细文档:http://www.w3school.com.cn/jsref/dom_obj_audio.asp pause()方法只是暂停,这里重新load之后,再次play,音乐可重头播放 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script language="javascrip

关于html5 audio 标签在ios系统上不能正常自动播放的解决办法

由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. 这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.但 iOS 9 出现后, 发现这个方案"失效"了. 没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件. 对于能够自动播放时事件的顺序如下loadstart -

[转载]html5 audio音频播放全解析——html5系列

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html 在手机上浏览效果会更好 文章结构 1

html5 audio音频播放全解析

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html(IE8以下不支持) 在手机上浏

audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题

(一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xxx.mp4"></video> (三)使用video代替audio (1) 有时候audio标签被屏蔽,不能被浏览器解释通过,可以选择使用video来代替: <video src="xxx.mp3"></video> (2) 若想要将音乐

HTML5 audio标签自制音乐播放器

相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack(自动化构建工具,实现LESS,CSS,JS等编译和压缩代码) 实现的功能 播放暂停(点击切换播放状态) 下一曲(切换下一首) 随机播放(当前歌曲播放完自动播放下一曲) 单曲循环(点击随机播放图标可切换成单曲循环) 音量调节(鼠标移入滑动设置音量大小) 歌曲进度条(可点击切换进度直接跳,也可以点击小

HTML5 Audio时代的MIDI音乐文件播放

大家都知道,HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式,但是有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持,因为mid文件并不像其他声音文件那样记录声音的采样信息,而是记录了乐器的演奏指令,二者的原理截然不同. mid文件格式的最突出的有点是文件极小,几分钟的音乐可能只 大家都知道,HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式,但是有个很重要的音乐文件格式midi(扩展名m