HTML5audio標(biāo)簽使用js進(jìn)行播放控制實(shí)例

這篇文章主要為大家分析了HTML5 audio標(biāo)簽使用js進(jìn)行播放控制實(shí)例的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)易懂，操作細(xì)節(jié)合理，具有一定參考價(jià)值。如果感興趣的話，不妨跟著跟隨小編一起來(lái)看看，下面跟著小編一起深入學(xué)習(xí)“HTML5 audio標(biāo)簽使用js進(jìn)行播放控制實(shí)例”的知識(shí)吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、網(wǎng)站空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、房縣網(wǎng)站維護(hù)、網(wǎng)站推廣。

<audio>標(biāo)簽可以在HTML5瀏覽器中播放音頻文件。

<audio>默認(rèn)提供一個(gè)控制面板，但是有些時(shí)候我們只需要播放聲音，控制面板由我們自己來(lái)定義其顯示的狀態(tài)。

這里我們可以使用JS來(lái)進(jìn)行控制。

代碼如下:

var audio ;
window.onload = function(){
initAudio();
}
var initAudio = function(){
//audio = document.createElement("audio")
//audio.src='Never Say Good Bye.ogg'
audio = document.getElementById('audio');
}
function getCurrentTime(id){
alert(parseInt(audio.currentTime) + '：秒');
}
 
function playOrPaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML='暫停';
return;
}
audio.pause();
obj.innerHTML='播放';
}
 
function hideOrShowControls(id,obj){
if(audio.controls){
audio.removeAttribute('controls');
obj.innerHTML = '顯示控制框'
return;
}
audio.controls = 'controls';
obj.innerHTML = '隱藏控制框'
return;
}
function vol(id,type , obj){
if(type == 'up'){
var volume = audio.volume + 0.1;
if(volume >=1 ){
volume = 1 ;
 
}
audio.volume = volume;
}else if(type == 'down'){
var volume = audio.volume - 0.1;
if(volume <=0 ){
volume = 0 ;
}
audio.volume = volume;
}
document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
}
function muted(id,obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = '開(kāi)啟靜音';
}else{
audio.muted = true;
obj.innerHTML = '關(guān)閉靜音';
}
}
//保留一位小數(shù)點(diǎn)
 
function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(".") < 0){
value = value.toString() + ".0";
}
return value;
}

調(diào)用方式如下：

代碼如下:

<a href="javascript:void(0);" onclick="getCurrentTime('firefox');">獲取播放時(shí)間</a>
<a href="javascript:void(0);" onclick="playOrPaused('firefox',this);">播放</a>
<a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隱藏控制框</a>
<a href="javascript:void(0);" onclick="muted('firefox',this);">開(kāi)啟靜音</a>
<input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/>
<audio src="/images/audio/Never Say Good Bye.ogg" id="audio" controls="controls" ></audio>

當(dāng)前音量：<span id = "nowVol"> - </span>

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類(lèi)元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。  3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類(lèi)型的電腦或?yàn)g覽器。

關(guān)于“HTML5 audio標(biāo)簽使用js進(jìn)行播放控制實(shí)例”就介紹到這了,更多相關(guān)內(nèi)容可以搜索創(chuàng)新互聯(lián)以前的文章，希望能夠幫助大家答疑解惑，請(qǐng)多多支持創(chuàng)新互聯(lián)網(wǎng)站！

新聞標(biāo)題：HTML5audio標(biāo)簽使用js進(jìn)行播放控制實(shí)例
文章路徑：http://muchs.cn/article26/gecpcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、商城網(wǎng)站、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)