HTML5音频播放

1、Audio(音频)

  HTML5提供了播放音频文件的标准

2、control(控制器)

  control属性提供添加播放、暂停和音量控件

3、标签

  <audio>定义声音

  <source>规定多媒体资源,可以是多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频文件视频播放</title>
</head>
<body>
    <audio src="raw/许嵩%20-%20摄影艺术.mp3" controls="controls">您的浏览器不支持</audio>
    <audio id="audio" src="raw/许嵩%20-%20摄影艺术.mp3" >haha</audio>
    <button onclick="clickA()" id="button">播放/暂停</button>
    <script>
       a= document.getElementById("audio");
        function clickA() {
            if(a.paused){
                a.play();
            }else{
                a.pause();
            }
        }
    </script>
    <video controls="controls" id="video">
        <source src="raw/摄影艺术.mkv">
        <source src="raw/摄影艺术.ogg">
        该浏览器不支持
    </video>
    <button onclick="clickV()">播放/暂停</button>
    <script>
        var v=document.getElementById("video");
        function clickV() {
            if(v.paused){
                v.play();
            }else{
                v.pause();
            }
        }
    </script>
</body>
</html>

时间: 2025-01-11 14:05:12

HTML5音频播放的相关文章

HTML5 音频播放 &lt;audio&gt;

HTML5 音频播放 ============================================================================= <audio> 属性与<video>标签相同,用法也相同 ====================================HTML 5 之前的音频播放================================== =====================================音频文

HTML5音频播放,歌词同步,及视频播放功能(JPlayer、JWPlayer、VideoJS)

近期项目中用到音频视频播放.所以就写了一个demo: 这个是JPlayer插件的视频播放: 这个是音频播放,歌词同步: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <!--注意:在IIS上配置的时候,需加入mime映射,否则歌词出不来.在IIS列表中找到"MIME类型".进行加入.lrc类型;.mp4类型文件--> <head>     <

HTML5 音频播放

代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音频播放</title> </head> <body> <P>陪你度过漫长岁月</P> <audio src="陈奕迅 - 陪你度过漫长岁月.mp3" controls=&

HTML5 音频视频

audio 元素能够播放声音文件或者音频流. <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>HTML5 音频播放</title> </head> <body> <!-- audio(音频) control(控制器) 标签:<audio> 定义声音 <sou

非常漂亮的HTML5音乐播放器

APlayer是一个非常漂亮的HTML5音频播放器,它将audio标签封装,并结合CSS制作出漂亮的播放器UI,它支持设置歌名.歌手和歌词,可以设置是否自动播放,支持缩略图,支持播放进度以及设置播放源. 查看演示 下载源码 HTML 首先是要加载播放器样式文件,这个播放器的样式酷似网易云音乐播放器.然后在body中加入播放器div#player1,待会要调用播放.接着载入APlayer.js文件. <link rel="stylesheet" href="APlayer

基于canvas和Web Audio的音频播放器

wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作.包括 Firefox, Chrome, Safari, Mobile Safari 和 Opera浏览器. 在线演示:http://www.htmleaf.com/Demo/201503151525.html 下载地址:http://www.htmleaf.com/html

【jquery】一款不错的音频播放器——Amazing Audio Player

前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows 和 MAC 应用程序,允许你创建 HTML5 音频播放器的网站.该音频播放器兼容 iPhone,ipad,Android,Chrome,Firefox,Safari,Opera 和 IE 7 / 8 / 9 / 10.同时它也可以发布成为一个 WordPress 的音频播放器插件,Joomla 音

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

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

HTML5实现Winamp2.9音频播放器插件

Winamp2-js是一款使用html5和javascript来实现Winamp 2.9音频播放器的插件.该Winamp音频播放器插件有支持拖拽文件,自定义皮肤,支持可视化模式等特点.特点还有: 实际的Winamp皮肤文件存储在本地计算机上,你可以任意调用自己的Winamp 2皮肤. 可以通过拖拽.弹出按钮或"options"按钮来调用本地音频文件或皮肤. 有两种可视化模式:示波器和曲谱模式. 支持热键. 支持"Shade"迷你模式. 在线演示:http://www