HTML5 學習 音訊

vid

eo

>

ideo

>

deo>

ideo

>

2 介面屬性(用在js中)

3 介面方法(用在js中)

4 介面事件(用在js中)

5 介面屬性和介面方法的使用

6 例項

muted：設定是否預設靜音。

paused：判斷音訊是否處於暫停狀態。

// 將總時長轉換成 00:00 的格式，由於實型資料的不穩定性，此處需要轉成整數

parseint(myaudio.duration/60) + 「:」 + parseint(myaudio.duration%60)

muted：返回/設定音訊的靜音效果。

pause()：讓音訊暫停。

pause：當音訊檔案暫停（呼叫了pause()方法）時觸發。

volumechange：當音量發生變化時觸發。

（2）如何獲取音訊物件的例項：

//方法1：獲取頁面dom結構中的節點。

var myaudio = document.
getelementbyid
(「myaudio」)
;alert
(myaudio)
;// [object htmlaudioelement]

//方法2：利用audio建構函式建立例項。

var myaudio =
newaudio()
;//等同於 var myaudio=document.createelement(「audio」);
myaudio.src=「audio/
01.***」;
alert
(myaudio)
;

var myaudio=document.

queryselector
("#myaudio");
var container=document.
queryselector
("#container");
var img=container.
queryselector
("img");
img.
onclick
=function()
else
}

女人心事 - 陶晶瑩

我懷念的 - 孫燕姿
0:00

var mymusic=

newaudio()
;// 建立音訊例項
var timer;
var containernode=document.
queryselector
("#container");
var timenode=containernode.
queryselector
(".time");
var progressnode=containernode.
queryselector
(".progress");
var progressbarnode=containernode.
queryselector
(".progressbar");
var progresswidth=progressnode.offsetwidth;
function
musicplay
(music)
.***`
; mymusic.
play()
; timer=window.
setinterval
("getprogress()"
,500);
}function
getprogress()
}

100

暫停上一首
下一首快退
快進停止

#container

#container .progress
#container .progressbar
#container .control
#container .btn:hover
#container .volumn

var container=document.

queryselector
("#container");
var play=container.
queryselector
(".play");
var pause=container.
queryselector
(".pause");
var next=container.
queryselector
(".next");
var prev=container.
queryselector
(".prev");
var forward=container.
queryselector
(".forward");
var backward=container.
queryselector
(".backward");
var stop=container.
queryselector
(".stop");
var alone=container.
queryselector
(".alone");
var progress=container.
queryselector
(".progress");
var progressbar=container.
queryselector
(".progressbar");
var progresswidth=progress.offsetwidth;
var mymusic=
newaudio()
;var music=
["01"
,"02"
,"03"];
var currentmusic=0;
mymusic.src=
`audio/
$.***`
;// 進度條
mymusic.
ontimeupdate
=function()
play.
onclick
=function()
// 暫停
pause.
onclick
=function()
// 下一首
next.
onclick
=function()
.***`
; play.
click()
;}// 上一首
prev.
onclick
=function()
mymusic.src=
`audio/
$.***`
; play.
click()
;}// 快進
forward.
onclick
=function()
// 快退
backward.
addeventlistener
("click"
,function()
)// 停止
stop.
onclick
=function()
.***`;}
mymusic.
addeventlistener
('ended'
,function()
)mymusic.
addeventlistener
('durationchange'
,function()
)//控制音量大小
var inputvolumn=container.
queryselector
('input');
var textvolumn=container.
queryselector
('output');
function
volumnchange()

HTML5學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖放是標準的一部分，任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...