html5 + css3 + javascript Array Object Audio
Discussion
Audio playをJavascript で実装するには。
Audioタグは、preload, typeの属性が必要です。
Preload：初期値＝Auto、動く属性＝None、残り＝Metadata
Type：m４a=audio/aac, mp3=audio/mp3, wav=audio/wav, hls(m3u)="audio/mpegURL"
html5: audio.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta https-equiv="content-type" content="text/html" />
<title>Audio stream</title>
<script type="text/javascript">
var item = [
{"url":"url1.m4a", "songname":"titile1", "image":"photo1.jpg"},
{"url":"url2.m4a", "songname":"title2", "image":"photo2.jpg"},
{"url":"url3.m4a", "songname":"title3", "image":"photo3.jpg"
]
cura = 0
window.addEventListener('load',
function(){
}
, false);
function audioSet1(){
cura = 0;
playA();
}
function audioSet2(){
cura = 1;
playA();
}
function audioSet3(){
cura = 2;
playA();
}
function plusA(){
cura++;
playA();
}
function playA(){
var a = document.getElementById("a1");
var h = document.getElementById("head1");
var image = document.getElementById("im1");
a.src = item[cura].url;
h.innerHTML = item[cura].songname;
image.src = item[cura].image;
a.addEventListener('ended', plusA, false);
}
</script>
<style type="text/css">
body {
text-align: center;
}
img {
width: 300px;
height: 300px;
}
.btn_box {
width: 100%;
color: black;
font-size: 12px;
}
.box1 {
display: none;
}
</style>
</head>
<body>
<h1 id="head1"></h1>
<img id="im1" oncontextmenu="return false">
<div class="box1"
<audio id="a1" preload="none" type="audio/aac"></audio>
</div>
<div class="btn_box" onclick="audioSet1()">title1</div>
<div class="btn_box" onclick="audioSet2()">title2</div>
<div class="btn_box" onclick="audioSet3()">title3</div>
</body>
</html>
これにUIを実装していけば、Web Audio APIの完成となります。
関連のイベント
a.addEventListener('playing', function(){
---
}, false);
a.addEventListener('lodedmetadata', function(){
// セットしたいUIのデュレーション
a.duration
}
a.addEventListener('sheeking', function(){
}, false);
a.addEventListener{'timeupdate', function(){
}, false
エフェクトをかけることも可能。
AudioContextの実装。
要エフェクトの掛け方。募集。
0