html5中audio标签

html5的audio功能上已经非常强大，回放，跳转，缓冲等以前只能用flash才能实现的功能，html5的audio都能轻松搞定
最近的一个项目使用到了这个功能，把我使用的情况写下来，供大家参考, 因为我需要的功能很简单，所以做的不复杂，如果要使用更多的功能，可以参考下面的api，能实现很多高大上的功能
audio 相关的 api

备用（当浏览器不支持audio时显示的内容）

控制函数功能说明

修改source的值后需要audio.load();重新加载音频才会播放
load() 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
play() 加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
pause() 暂停处于播放状态的音频、视频文件
audio 的只读媒体特性有：

只读属性属性说明

duration 获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
paused 如果媒体文件被暂停，则返回true，否则返回false
ended 如果媒体文件播放完毕，则返回true
startTime 返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
error 在发生了错误后返回的错误代码
currentSrc 以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

audio 可脚本控制的特性值：

autoplay 自动播放已经加载的的媒体文件，或查询是否已设置为autoplay
loop 将媒体文件设置为循环播放，或查询是否已设置为loop
currentTime 以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
controls 显示或者隐藏用户控制界面
volume 在0.0到1.0间设置音量值,或查询当前音量值
muted 设置是否静音
autobuffer 媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性
对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3.幸好Google的chrome都支持。

audio的事件：
oncanplay 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
onerror 当在元素加载期间发生错误时运行脚本
ontimeupdate 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
还有其他方法看w3c

关于ios不支持预加载的问题
ios不支持预加载真的很操蛋，当点击播放的时候音频没加载完成，但是我通过监听音频的play事件或者onplaying(当媒介数据已开始播放时运行脚本)发现在ios上音频没有播放，但是这事件已经执行了，所以又重新监听了canplaythrough事件（当视频可以正常播放且无需停顿时执行 JavaScript）来给音频播放之前加loading效果

this.$refs.audio.addEventListener('loadstart', () => {
console.log('onloadstart')
this.$refs.playImg.classList.add('disabled')
})
this.$refs.audio.addEventListener('canplaythrough', () => {
console.log('canplaythrough')
this.$refs.playImg.classList.remove('disabled')
})

<audio controls="controls" preload="auto">
// preload="auto"设置为预加载的 audio 元素
<div id="audioControl">
<div class="play">
<span id="play">Play</span>
</div>
</div>

var media = $('#media')[0];
var audioTimer = null;

//绑定播放暂停控制
$('.play').bind('click', function() {
playAudio();
});

//播放暂停切换
function playAudio() {
if(media.paused) {
play();
// 当前的播放，其他的音乐都暂停
for(var i= 0;i<$('audio').length;i++){
if(i!==index){ //index表示当前播放的audio的索引值
$('audio').eq(i)[0].pause();
$('audio').eq(i)[0].currentTime = 0;
$('.item .list').eq(i).find('.play').removeClass('on');
}
}
} else {
pause();
}
}

//播放
function play() {
media.play();
$('#play').html('Pause');
}

//暂停
function pause() {
media.pause();
$('#play').html('Play');
}

音频的倍速播放 playbackRate
myVid=document.getElementById(“video1”);
myVid.playbackRate=0.5;
---------------------
原文：https://blog.csdn.net/zhangyabo_code/article/details/78320320

也介绍的详细https://www.cnblogs.com/reaf/p/6009712.html

html5中audio标签相关推荐

HTML5中Audio标签ended属性的使用
Audio对象属性:ended 描述:返回音频的播放是否已结束(值为布尔类型:true或false) 以下示例是我做音乐播放器时想让播放器自动循环播放的代码: audio=$("#audi ...
linux java amr转mp3_本工具用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放...
音频转码工具本工具主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放. 支持 Linux/Windows/Mac 平台因为是基于 JAVE 项目 ...
java amr音频转码_jave: 音频转码工具，主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放...
音频转码工具本工具主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放. 支持 Linux/Windows/Mac 平台因为是基于 JAVE 项目 ...
html5中audio播放器标签属性整理
html5中audio播放器标签属性整理 HTML5 元素 audio播放器隐藏 audio标签控制函数功能说明 audio 可脚本控制的特性值只读属性属性说明 HTML5 元素元素是一个 HTM ...
php中文歌词,详细介绍HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...
html嵌入audio格式不支持,html5中audio支持音频格式的解决方法
HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...
CSS中的长度单位和HTML5中多媒体标签的使用
CSS中的长度单位和HTML5中多媒体标签的使用第一部分.长度单位 1.基本长度单位 2.长度单位的换算第二部分.vw.vh.vmin.vmax 1.vw.vh.vmin.vmax的含义 2.vw ...
vue3-video-play视频组件的使用（一）——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...

html5中audio标签

html5中audio标签相关推荐

最新文章

热门文章