1. 程式人生 > >audio音頻

audio音頻

net 默認 pause target 回放 iot scrip 瀏覽器 media

html5的audio功能上已經非常強大,回放,跳轉,緩沖等以前只能用flash才能實現的功能,html5的audio都能輕松搞定

最近的一個項目使用到了這個功能,把我使用的情況寫下來,供大家參考, 因為我需要的功能很簡單,所以做的不復雜,如果要使用更多的功能,可以參考下面的api,能實現很多高大上的功能

audio 相關的 api

<audio src=”音頻的地址”>備用(當瀏覽器不支持audio時顯示的內容)</audio>

控制函數功能說明

  • load() 加載音頻、視頻軟件,通常不必調用,除非是動態生成的元素,用來在播放前預加載
  • play() 加載並播放音頻、視頻文件,除非文件已經暫停在其他位置,否則默認重頭開始播放
  • pause() 暫停處於播放狀態的音頻、視頻文件

audio 的只讀媒體特性有:

只讀屬性屬性說明

  • duration 獲取媒體文件的播放時長,以s為單位,如果無法獲取,則為NaN
  • paused 如果媒體文件被暫停,則返回true,否則返回false
  • ended 如果媒體文件播放完畢,則返回true
  • startTime 返回起始播放時間,一般是0.0,除非是緩沖過的媒體文件,並一部分內容已經不在緩沖區
  • error 在發生了錯誤後返回的錯誤代碼
  • currentSrc 以字符串形式返回正在播放或已加載的文件,對應於瀏覽器在source元素中選擇的文件

audio 可腳本控制的特性值:

  • autoplay 自動播放已經加載的的媒體文件,或查詢是否已設置為autoplay
  • loop 將媒體文件設置為循環播放,或查詢是否已設置為loop
  • currentTime 以s為單位返回從開始播放到目前所花的時間,也可設置currentTime的值來跳轉到特定位置
  • controls 顯示或者隱藏用戶控制界面
  • volume 在0.0到1.0間設置音量值,或查詢當前音量值
  • muted 設置是否靜音
  • autobuffer 媒體文件播放前是否進行緩沖加載,如果設置了autoplay,則忽略此特性

對於這些屬性,主流的瀏覽器都支持。可是別以為就沒有了兼容性,在音頻播放流中,有兩個陣營。firefox 和 opera 支持 ogg 音頻,safari 和 ie 支持 mp3.幸好Google的chrome都支持。

<div id="audioControl">  
    <div class="play">  
        <span id="play">Play</span>  
    </div>  
</div>  
  
<audio id="media" src="test.mp3"></audio>  

  

var media = $(‘#media‘)[0];  
var audioTimer = null;  
  
//綁定播放暫停控制  
$(‘.play‘).bind(‘click‘, function() {  
    playAudio();  
});   
  
//播放暫停切換  
function playAudio() {  
    if(media.paused) {  
        play();  
    } else {  
        pause();  
    }  
}  
  
//播放  
function play() {  
    media.play();  
    $(‘#play‘).html(‘Pause‘);  
}  
  
//暫停  
function pause() {  
    media.pause();  
    $(‘#play‘).html(‘Play‘);  
}  

  原鏈接:http://blog.csdn.net/alongken2005/article/details/44569981

audio音頻