Skip to content

Instantly share code, notes, and snippets.

@zfkun

zfkun/audio_android.html

Last active December 25, 2015 16:08
Show Gist options
  • Save zfkun/7003113 to your computer and use it in GitHub Desktop.
Save zfkun/7003113 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Audio API test for Android & IOS
Raw
audio_android.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio test</title>
<style>
p { font-weight: bold; }
span { color: red; }
button { width: 100px; height: 30px; }
audio { display: block; margin: 5px 0; }
</style>
</head>
<body>
<p>调试信息: <span></span></p>
<p>
<button>random</button>
<button>clear</button>
<button>uncontrol</button>
<button>mute</button>
</p>
<script>
var baseURI = 'http://s.7k7kimg.cn/mobile/platform/games/fangyan/20131013/';
var dataList = [
{
"area": "北京",
"durl": ["audio/1374221726466.mp3","audio/1374221726466.ogg"],
"answer": ["不好的眼色","各种眼色","隔着眼色","不好相处","很好相处"],
"indexNum": 3
},
{
"area": "北京",
"durl": ["audio/1374221801007.mp3","audio/1374221801007.ogg"],
"answer": ["变戏法","变着翻一番","编者烦","想尽各种办法","便折返"],
"indexNum": 3
},
{
"area": "辽宁-大连",
"durl": ["audio/1374222511732.mp3","audio/1374222511732.ogg"],
"answer": ["鼻涕","笔筒","笔头","鼻头","冰桶"],
"indexNum": 0
},
{
"area": "江西-赣州",
"durl": ["audio/1374223027561.mp3","audio/1374223027561.ogg"],
"answer": ["赌名字","短命鬼","多名仔","杜明仔","度命仔"],
"indexNum": 1
},
{
"area": "山东-淄博",
"durl": ["audio/1374223584530.mp3","audio/1374223584530.ogg"],
"answer": ["我眨","板凳","卧倒","握爪","我炸"],
"indexNum": 1
},
{
"area": "天津",
"durl": ["audio/1374223910797.mp3","audio/1374223910797.ogg"],
"answer": ["显摆","选拔","摇摇摆摆","闲掰","瞎掰"],
"indexNum": 0
},
{
"area": "重庆",
"durl": ["audio/1374224118136.mp3","audio/1374224118136.ogg"],
"answer": ["娘娘庙","大娘的号","阿姨好","黏黏的","娘娘腔"],
"indexNum": 2
},
{
"area": "四川-成都",
"durl": ["audio/1377602767413.mp3","audio/1377602767413.ogg"],
"answer": ["巴布豆","爬不到","八步倒","巴不得","怕不的"],
"indexNum": 3
},
{
"area": "河北-保定",
"durl": ["audio/1375155763066.mp3","audio/1375155763066.ogg"],
"answer": ["哀求","饿了","二楼","好的","打扰"],
"indexNum": 0
},
{
"area": "东北",
"durl": ["audio/1375156736973.mp3","audio/1375156736973.ogg"],
"answer": ["戏弄人","刷大道","大刀","大盗","耍大盗"],
"indexNum": 0
}
];
var audioEvents = 'play,ended,progress,loadedmetadata'.split( ',' );
var audioCache = {};
var audioControl = !0;
var audioMute = !1;
var currentAudio;
// 随机函数
function between( min, max ) {
return Math.floor( min + Math.random() * ( max - min ) );
}
// 播放函数
function playerWithURI( uri ) {
var audio;
// 查询本地缓存, 提高性能, 不存在自动构建初始化
if ( !( audio = audioCache[ uri ] ) ) {
// 本地缓存不存在, 立即新创建 audio 元素
// 同时加入缓存
audio = audioCache[ uri ] = document.createElement( 'audio' );
document.body.appendChild( audio );
// 批量事件绑定
audioEvents.forEach(function ( type ) {
audio.addEventListener( type, handlerAudio );
});
}
audio.controls = audioControl;
audio.muted = audioMute;
audio.volume = audioMute ? 0 : 1;
return audio;
}
// 某audio播放完毕回调
function handlerAudio( ev ) {
var node = document.querySelector( 'span' );
var audio = this;
node.innerHTML = '[' + ev.type + ']: '
+ ( ev.type === 'progress'
? audio.currentTime + ' / ' + audio.duration
: audio.src );
console.info( ev );
}
// 随机播放
function randomPlay() {
var index = between( 0, dataList.length ); // 随机选一首
var uri = baseURI + dataList[ index ][ 'durl' ][ 0 ];
// var uri = 'http://s3.amazonaws.com/audiojs/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3';
var audio = currentAudio;
// 先暂停当前(上次)播放
if ( audio ) audio.pause();
// 重新赋值
audio = currentAudio = playerWithURI( uri );
audio.pause();
audio.src = uri;
audio.play();
}
// 清理缓存及对应DOM
function cleanPlay() {
for ( var p in audioCache ) {
if ( audioCache.hasOwnProperty( p ) && audioCache[ p ] ) {
// 批量事件解除绑定
audioEvents.forEach(function ( type ) {
audioCache[ p ].removeEventListener( type, handlerAudio );
});
audioCache[ p ].pause();
audioCache[ p ].parentNode.removeChild( audioCache[ p ] );
}
}
currentAudio = null;
audioCache = {};
}
// 打开/关闭控制器
function toggleControl() {
audioControl = !audioControl;
// 更新按钮
this.innerText = audioControl ? 'uncontrol' : 'control';
// 批量更新
for ( var p in audioCache ) {
audioCache[ p ].controls = audioControl;
}
}
// 打开/关闭静音
function toggleMute() {
audioMute = !audioMute;
// 更新按钮
this.innerText = audioMute ? 'unmute' : 'mute';
// 批量更新
for ( var p in audioCache ) {
audioCache[ p ].muted = audioMute;
audioCache[ p ].volume = audioMute ? 0 : 1;
}
}
document.addEventListener( 'DOMContentLoaded', function() {
var buttons = document.querySelectorAll( 'button' ),
type = window.ontouchstart ? 'touchstart' : 'mousedown';
// 切换
buttons[ 0 ].addEventListener( type, randomPlay );
// 清理
buttons[ 1 ].addEventListener( type, cleanPlay );
// UI控制
buttons[ 2 ].addEventListener( type, toggleControl );
// 静音控制
buttons[ 3 ].addEventListener( type, toggleMute );
// 立即执行一次
randomPlay();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment