audio 在浏览器中自动播放

autoplay 属性

autoplay 属性规定一旦音频就绪马上开始播放。

如果设置了该属性,音频将自动播放。

使用 autoplay 属性进行播放

    //使用autoplay属性
var src = "./award.wav";
var body = document.getElementsByTagName("body")[0]; if (body.getElementsByTagName("audio").length <= 0) {
var audio = document.createElement("audio");
audio.setAttribute("id", "awardAudio");
audio.setAttribute("autoplay", "autoplay");
audio.setAttribute("src", src);
body.appendChild(audio); setTimeout(function() {
body.removeChild(audio);
}, 2300);
}

oncanplaythrough 事件

oncanplaythrough 事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发。

在视频/音频(audio/video)加载过程中,事件的触发顺序如下:

  1. onloadstart
  2. ondurationchange
  3. onloadedmetadata
  4. onloadeddata
  5. onprogress
  6. oncanplay
  7. oncanplaythrough
//1
<audio oncanplaythrough="event">
//2
audio.oncanplaythrough=function(){event()};
//3
audio.addEventListener("canplaythrough", event;

监听 canplaythrough 事件进行播放

    // 监听加载事件执行play方法
var src = "./award.wav";
var body = document.getElementsByTagName("body")[0]; if (body.getElementsByTagName("audio").length <= 0) {
var audio = document.createElement("audio");
audio.setAttribute("id", "awardAudio");
audio.setAttribute("src", src);
body.appendChild(audio); //判断音频是否加载完成?
audio.addEventListener(
"canplaythrough",
function() {
audio.play();
setTimeout(function() {
body.removeChild(audio);
}, audio.duration * 1000 + 100);
},
false
);
}

duration 在 autoplay 下回失效,返回 NaN

JS 报错:Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

https://goo.gl/xX8pDD这里是官方给出的解释,chrome66 之后反正是不能用了

解决方法

  1. 在 chrome 浏览器中输入 chrome://flags/#autoplay-policy
  2. 在 Autoplay policy 下拉中设置无需用户手势
  3. 重启 chrome

  1. chrome.exe --disable-features=AutoplayIgnoreWebAudio

MDN->audio

  • MDN->audio 属性

    • src 歌曲的路径
    • preload 是否在页面加载后立即加载(设置 autoplay 后无效)
    • controls 显示 audio 自带的播放控件
    • loop 音频循环
    • autoplay 音频加载后自动播放
    • currentTime 音频当前播放时间
    • duration 音频总长度
    • ended 音频是否结束
    • muted 音频静音为 true
    • volume 当前音频音量
    • readyState 音频当前的就绪状态
  • MDN->audio 事件
    • abort 当音频/视频的加载已放弃时
    • canplay 当浏览器可以播放音频/视频时
    • canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
    • durationchange 当音频/视频的时长已更改时
    • emptied 当目前的播放列表为空时
    • ended 当目前的播放列表已结束时
    • error 当在音频/视频加载期间发生错误时
    • loadeddata 当浏览器已加载音频/视频的当前帧时
    • loadedmetadata 当浏览器已加载音频/视频的元数据时
    • loadstart 当浏览器开始查找音频/视频时
    • pause 当音频/视频已暂停时
    • play 当音频/视频已开始或不再暂停时
    • playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
    • progress 当浏览器正在下载音频/视频时
    • ratechange 当音频/视频的播放速度已更改时
    • seeked 当用户已移动/跳跃到音频/视频中的新位置时
    • seeking 当用户开始移动/跳跃到音频/视频中的新位置时
    • stalled 当浏览器尝试获取媒体数据,但数据不可用时
    • suspend 当浏览器刻意不获取媒体数据时
    • timeupdate 当目前的播放位置已更改时
    • volumechange 当音量已更改时
    • waiting 当视频由于需要缓冲下一帧而停止

在react中做成组件

/**
* Created by easterCat on 2017/10/13.
*/ import React from 'react';
import ReactDOM from 'react-dom';
import {connect} from 'react-redux';
import {Icon} from 'antd'; class RecordAudio extends React.Component {
constructor(props) {
super(props);
this.state = {
isPlay: false,
openMuted: false,
volume: 100,
allTime: 0,
currentTime: 0
}; this.millisecondToDate = (time) => {
const second = Math.floor(time % 60);
let minite = Math.floor(time / 60);
return `${minite}:${second >= 10 ? second : `0${second}`}`
}; this.controlAudio = (type, e) => {
const audio = ReactDOM.findDOMNode(this.refs['audio']);
switch (type) {
case 'allTime':
this.setState({
allTime: audio.duration
});
break;
case 'play':
audio.play();
this.setState({
isPlay: true
});
break;
case 'pause':
audio.pause();
this.setState({
isPlay: false
});
break;
case 'changeCurrentTime':
this.setState({
currentTime: e.target.value
});
audio.currentTime = e.target.value;
if (e.target.value === audio.duration) {
this.setState({
isPlay: false
})
}
break;
case 'getCurrentTime':
this.setState({
currentTime: audio.currentTime
});
if (audio.currentTime === audio.duration) {
this.setState({
isPlay: false
})
}
break;
// 是否静音
case 'muted':
audio.muted = !audio.muted;
//为true,则是静音模式
if (audio.muted) {
this.setState({
openMuted: true,
volume: 0
});
} else {
this.setState({
openMuted: false,
volume: 100
});
}
break;
// 调节音量
case 'changeVolume':
/**
* muted=true开启静音模式,muted=false开启声音
* @type {number}
*/
audio.volume = e.target.value / 100;
this.setState({
volume: e.target.value,
});
//如果声音为0,开起静音
if (e.target.value <= 0) {
audio.muted = true;
this.setState({
openMuted: true
})
} else if (e.target.value >= 0) {
audio.muted = false;
this.setState({
openMuted: false
})
}
break
}
}
} componentDidMount() { } render() {
const {src} = this.props; return (
<div className="audioBox">
<audio ref="audio"
src={src}
preload={true}
onCanPlay={() => this.controlAudio('allTime')}
onTimeUpdate={(e) => this.controlAudio('getCurrentTime')}
>
音乐播放器
</audio>
<i className={this.state.isPlay ? 'pause' : 'play'}
onClick={() => this.controlAudio(this.state.isPlay ? 'pause' : 'play')}
>
{
this.state.isPlay ? <Icon className="pause-btn" type="pause"/> :
<Icon className="play-btn" type="caret-right"/>
}
</i> <span className="current">
{
this.millisecondToDate(this.state.currentTime) + '/' + this.millisecondToDate(this.state.allTime)
}
</span> <input type="range"
className="time"
min="0"
step="0.01"
max={this.state.allTime}
value={this.state.currentTime}
onChange={(e) => this.controlAudio('changeCurrentTime', e)}
/> <i className={this.state.openMuted ? 'mute' : 'nomute'}
onClick={() => this.controlAudio('muted')}
>
{
this.state.openMuted ? <Icon className="nomute-btn" type="check"/> :
<Icon className="mute-btn" type="close"/>
}
</i>
<input type="range"
className="volume"
min="0"
step="1"
max="100"
onChange={(e) => this.controlAudio('changeVolume', e)}
value={this.state.openMuted ? 0 : this.state.volume}
/>
</div>
)
}
} const mapStateToProps = (state) => {
return {}
}; const mapActionCreators = {}; export default connect(mapStateToProps, mapActionCreators)(RecordAudio);

HTML 5 视频/音频参考手册

HTML5 声音引擎 Howler.js

MDN audio

基于 react 的 audio 组件

HTML5 Audio 的兼容性问题和优化

html5 audio 音频播放全解析

音频 API => AudioContext

[JavaScript] audio在浏览器中自动播放的更多相关文章

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放

    我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...

  3. 解决audio 在部分移动端浏览器不能自动播放(目前包括ios、微博)

    问题描述:项目需要在页面加载完成后自动播放音乐,但在ios中却无法自动播放,需要用户主动触发 解决办法: $('html').one('touchstart',function(){ document ...

  4. 解决Chrome浏览器无法自动播放音频视频的问题,Uncaught (in promise) DOMException

    转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...

  5. ios微信浏览器音乐自动播放

    setTimeout(function(){ //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 document.getElementById('bgmedia').play() ...

  6. 关于selenium无法在chrome中自动播放flash的问题

    最近用selenium写个小脚本,遇到flash不能自动播放问题 我遇到的情况,直接提示 请确认是否安装flash,其实已经安装,点击下载flash,然后提示是否允许. 整了好久,发现终极方法: ## ...

  7. 如何使用python来模拟鼠标点击(将通过实例自动化模拟在360浏览器中自动搜索"python")

    一.准备工作: 安装pywin32,后面开发需要pywin32的支持,否则无法完成与windows层面相关的操作. pywin32的具体安装及注意事项: 1.整体开发环境: 基于windows7操作系 ...

  8. JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性,这个属性是什么?

    原文链接http://www.cnblogs.com/zcjnever/archive/2011/04/21/2023133.html Javascript中的offsetParent属性 支持的浏览 ...

  9. JavaScript问题——在浏览器中的offsetLeft/offsetWidth等属性是什么?

    原文链接http://www.cnblogs.com/xiaohuochai/p/5828369.html https://blog.csdn.net/u012532033/article/detai ...

随机推荐

  1. select2使用小结

    做项目考虑到使用的便捷,要用到select2,就研究了一下,做个小结,防止忘记.本文内容是建立在NFine框架上的,使用的MVC三层架构.本人很少写文章,学习的知识也过少,不知道能不能表达准确,如有错 ...

  2. 201771010126 王燕《面向对象程序设计(java)》第十八周学习总结

    实验十八  总复习 实验时间 2018-12-30 1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: (3) 综合掌握java GUI 程序设 ...

  3. db2数据库常见问题

    db2数据库不能轻易改变表结构,不然表会进入暂挂状态,造成表被锁住. 解锁表语句:call sysproc.admin_cmd('reorg table <table name>');

  4. 微信小程序ios点击状态栏返回顶部不好使

    最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...

  5. .net Core 2.0应用程序发布到IIS上注意事项

    .net Core2.0应用程序发布window服务器报错容易错过的配置. 1.应用程序发布. 2.IIS上新建网站. 3.应用程序池选择无托管代码. 4.服务器上安装DotNetCore.1.0.1 ...

  6. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  7. [Swift]LeetCode594. 最长和谐子序列 | Longest Harmonious Subsequence

    We define a harmonious array is an array where the difference between its maximum value and its mini ...

  8. [Swift]LeetCode600. 不含连续1的非负整数 | Non-negative Integers without Consecutive Ones

    Given a positive integer n, find the number of non-negativeintegers less than or equal to n, whose b ...

  9. less环境的安装与搭建

    less: Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充.Less 可以运行在 Node 或浏 ...

  10. python 模拟豆瓣登录(豆瓣6.0)

    最近在学习python爬虫,看到网上有很多关于模拟豆瓣登录的例子,随意找了一个试了下,发现不能运行,对比了一下代码和豆瓣网站,发现原来是豆瓣网站做了修改,增加了反爬措施. 首先看下要模拟登录的网站: ...