• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5中 media（播放器）的api使用指南

    直接奉上示例代码，废话就不多说了。


    复制代码
    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HTML Audio API</title>
    <link rel="stylesheet" href="./style/main.css" />
    <script src="./script/audio-controls.js"></script>
    </head>
    <body>
    <header>
    <h1>HTML5 Audio API</h1>
    <p>HTML5 Audio API demo by <a href="<a href="http://github.com/LearnShare">http://github.com/LearnShare</a>" target="_blank">LearnShare</a>.</p>
    <p>
    Last update @2013-04-23 20:40:00
    + add info table
    update @2013-04-22 14:54:00
    + add DOM events
    update @2013-04-22 12:47:00
    + add getCurrentSrc button
    </p>
    <p>
    View code on <a href="<a href="http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/">http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/</a>" target="_blank">LearnShare.github.io</a>.
    API reference: <a href="<a href="https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement">https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement</a>" target="_blank">HTMLMediaElement</a> and <a href="<a href="http://www.w3schools.com/tags/ref_av_dom.asp">http://www.w3schools.com/tags/ref_av_dom.asp</a>" target="_blank">Audio/Video DOM References</a>
    </p>
    </header>
    <article>
    <section>
    <h2>Audio Element</h2>
    <audio id="audio" src="./media/music1.mp3" controls="controls"></audio>
    <p>Open the <strong>developer tool</strong> to view console logs.</p>
    </section>
    <section>
    <h2>Controls</h2>
    <button id="play">play</button>
    <button id="pause">pause</button>
    <button id="get_paused">getPaused</button>
    <button id="get_ended">getEnded</button>


    <button id="volume_down">volume-</button>
    <button id="volume_up">volume+</button>
    <button id="get_volume">getVolume</button>


    <button id="get_src">getSrc</button>
    <button id="play_music1">playMusic1</button>
    <button id="play_music2">playMusic2</button>
    <button id="remove_music">removeMusic</button>
    <button id="get_current_src">getCurrentSrc</button>


    <button id="get_initial_time">getInitialTime</button>
    <button id="get_duration">getDuration</button>
    <button id="get_seeking">getSeeking</button>
    <button id="jump_to">jumpTo_30s</button>
    <button id="get_current_time">getCurrentTime</button>
    <button id="get_played">getPlayed</button>


    <button id="autoplay_on">autoplay_on</button>
    <button id="autoplay_off">autoplay_off</button>
    <button id="get_autoplay">getAutoplay</button>


    <button id="controls_show">controls_show</button>
    <button id="controls_hide">controls_hide</button>
    <button id="get_controls">getControls</button>


    <button id="loop_on">loop_on</button>
    <button id="loop_off">loop_off</button>
    <button id="get_loop">getLoop</button>


    <button id="preload_metadata">preload_metadata</button>
    <button id="get_preload">getPreload</button>


    <button id="get_default_muted">getDefaultMuted</button>
    <button id="mute">mute</button>
    <button id="unmute">unmute</button>
    <button id="get_muted">getMuted</button>


    <button id="get_default_playback_rate">getDefaultPlaybackRate</button>
    <button id="playback_rate_down">playbackRate-</button>
    <button id="playback_rate_up">playbackRate+</button>
    <button id="get_playback_rate">getPlaybackRate</button>


    <button id="get_network_state">getNetworkState</button>
    <button id="get_ready_state">getReadyState</button>
    <button id="get_buffered">getBuffered</button>
    <button id="get_seekable">getSeekable</button>
    </section>
    </article>
    <aside>
    <section>
    <h3>Player Attrs</h3>
    <table>
    <tr>
    <td>autoplay:</td>
    <td id="autoplay"></td>
    </tr>
    <tr>
    <td>controls:</td>
    <td id="controls"></td>
    </tr>
    <tr>
    <td>defaultMuted:</td>
    <td id="default_muted"></td>
    </tr>
    <tr>
    <td>defaultPlaybackRate:</td>
    <td id="default_playback_rate"></td>
    </tr>
    <tr>
    <td>loop:</td>
    <td id="loop"></td>
    </tr>
    <tr>
    <td>preload:</td>
    <td id="preload"></td>
    </tr>
    </table>
    </section>
    <section>
    <h3>Player Info</h3>
    <table>
    <tr>
    <td>src:</td>
    <td id="src"></td>
    </tr>
    <tr>
    <td>currentSrc:</td>
    <td id="current_src"></td>
    </tr>
    <tr>
    <td>duration:</td>
    <td id="duration"></td>
    </tr>
    <tr>
    <td>currentTime:</td>
    <td id="current_time"></td>
    </tr>
    <tr>
    <td>ended:</td>
    <td id="ended"></td>
    </tr>
    <tr>
    <td>paused:</td>
    <td id="paused"></td>
    </tr>
    <tr>
    <td>muted:</td>
    <td id="muted"></td>
    </tr>
    <tr>
    <td>volume:</td>
    <td id="volume"></td>
    </tr>
    <tr>
    <td>playbackRate:</td>
    <td id="playback_rate"></td>
    </tr>
    </table>
    </section>
    <section>
    <h3>Play status</h3>
    <table>
    <tr>
    <td>networkState:</td>
    <td id="network_state"></td>
    </tr>
    <tr>
    <td>readyState:</td>
    <td id="ready_state"></td>
    </tr>
    <tr>
    <td>buffered:</td>
    <td id="buffered"></td>
    </tr>
    <tr>
    <td>seekable:</td>
    <td id="seekable"></td>
    </tr>
    <tr>
    <td>played:</td>
    <td id="played"></td>
    </tr>
    <tr>
    <td>error:</td>
    <td id="error"></td>
    </tr>
    </table>
    </section>
    </aside>
    </body>
    </html>

    audio-controls.js


    复制代码
    代码如下:

    window.onload=function(){
    // get autio element
    var audio=document.getElementById("audio");
    // play()
    document.getElementById("play").onclick=function(){
    audio.play();
    console.log("play");
    };
    // pause()
    document.getElementById("pause").onclick=function(){
    audio.pause();
    console.log("pause");
    };
    // get paused
    document.getElementById("get_paused").onclick=function(){
    console.log("audio.paused: "+audio.paused);
    };
    // get ended
    document.getElementById("get_ended").onclick=function(){
    console.log("audio.ended: "+audio.ended);
    };
    // set volume-
    document.getElementById("volume_down").onclick=function(){
    audio.volume-=0.2;
    console.log("volume-0.2");
    };
    // set volume+
    document.getElementById("volume_up").onclick=function(){
    audio.volume+=0.2;
    console.log("volume+0.2");
    };
    // get volume
    document.getElementById("get_volume").onclick=function(){
    console.log("audio.volume: "+audio.volume);
    };
    // get src
    document.getElementById("get_src").onclick=function(){
    console.log("audio.src: "+audio.src);
    };
    // set src_music1
    document.getElementById("play_music1").onclick=function(){
    audio.src="./media/music1.mp3";
    updateSrc();
    updateCurrentSrc();
    console.log("play music1");
    };
    // set src_music2
    document.getElementById("play_music2").onclick=function(){
    audio.src="./media/music2.mp3";
    updateSrc();
    updateCurrentSrc();
    console.log("play music2");
    };
    // set remove_music
    document.getElementById("remove_music").onclick=function(){
    audio.src="";
    console.log("remove music");
    };
    // get currentSrc
    document.getElementById("get_current_src").onclick=function(){
    console.log("audio.currentSrc: "+audio.currentSrc);
    };
    // get initialTime
    document.getElementById("get_initial_time").onclick=function(){
    console.log("audio.initialTime: "+audio.initialTime);
    };
    // get duration
    document.getElementById("get_duration").onclick=function(){
    console.log("audio.duration: "+audio.duration);
    };
    // get seeking
    document.getElementById("get_seeking").onclick=function(){
    console.log("audio.seeking: "+audio.seeking);
    };
    // set currentTime
    document.getElementById("jump_to").onclick=function(){
    audio.currentTime=30;
    console.log("jumpTo 30s");
    };
    // get currentTime
    document.getElementById("get_current_time").onclick=function(){
    console.log("audio.currentTime: "+audio.currentTime);
    };
    // get played
    document.getElementById("get_played").onclick=function(){
    console.log("audio.played:");
    var ranges=audio.played;
    var n=ranges.length;
    for(var i=0;i<n;i++){
    console.log("("+ranges.start(i)+","+ranges.end(i)+")");
    }
    };
    // autoplay on
    document.getElementById("autoplay_on").onclick=function(){
    audio.autoplay=true;
    updateAutoplay();
    console.log("autoplay on");
    };
    // autoplay off
    document.getElementById("autoplay_off").onclick=function(){
    audio.autoplay=false;
    updateAutoplay();
    console.log("autoplay off");
    };
    // get autoplay
    document.getElementById("get_autoplay").onclick=function(){
    console.log("audio.autoplay: "+audio.autoplay);
    };
    // controls show
    document.getElementById("controls_show").onclick=function(){
    audio.controls=true;
    updateControls();
    console.log("controls show");
    };
    // controls hide
    document.getElementById("controls_hide").onclick=function(){
    audio.controls=false;
    updateControls();
    console.log("controls hide");
    };
    // get controls
    document.getElementById("get_controls").onclick=function(){
    console.log("audio.controls: "+audio.controls);
    };
    // loop on
    document.getElementById("loop_on").onclick=function(){
    audio.loop=true;
    updateLoop();
    console.log("loop on");
    };
    // loop off
    document.getElementById("loop_off").onclick=function(){
    audio.loop=false;
    updateLoop();
    console.log("loop off");
    };
    // get loop
    document.getElementById("get_loop").onclick=function(){
    console.log("audio.loop: "+audio.loop);
    };
    // preload metadata
    document.getElementById("preload_metadata").onclick=function(){
    audio.preload="metadata";
    updatePreload();
    console.log("preload metadata");
    };
    // get preload
    document.getElementById("get_preload").onclick=function(){
    console.log("audio.preload: "+audio.preload);
    };
    // get defaultMuted
    document.getElementById("get_default_muted").onclick=function(){
    console.log("audio.defaultMuted: "+audio.defaultMuted);
    };
    // mute
    document.getElementById("mute").onclick=function(){
    audio.muted=true;
    updateMuted();
    console.log("audio mute");
    };
    // unmute
    document.getElementById("unmute").onclick=function(){
    audio.muted=false;
    updateMuted();
    console.log("audio unmute");
    };
    // get muted
    document.getElementById("get_muted").onclick=function(){
    console.log("audio.muted: "+audio.muted);
    };
    // get defaultPlaybackRate
    document.getElementById("get_default_playback_rate").onclick=function(){
    console.log("audio.defaultPlaybackRate: "+audio.defaultPlaybackRate);
    };
    // set playbackRate-
    document.getElementById("playback_rate_down").onclick=function(){
    audio.playbackRate-=0.2;
    console.log("playbackRate-0.2");
    };
    // set playbackRate+
    document.getElementById("playback_rate_up").onclick=function(){
    audio.playbackRate+=0.2;
    console.log("playbackRate+0.2");
    };
    // get playbackRate
    document.getElementById("get_playback_rate").onclick=function(){
    console.log("audio.playbackRate: "+audio.playbackRate);
    };
    // get networkState
    document.getElementById("get_network_state").onclick=function(){
    console.log("audio.networkState: "+audio.networkState);
    };
    // get readyState
    document.getElementById("get_ready_state").onclick=function(){
    console.log("audio.readyState: "+audio.readyState);
    };
    // get buffered
    document.getElementById("get_buffered").onclick=function(){
    console.log("audio.buffered:");
    var ranges=audio.buffered;
    var n=ranges.length;
    for(var i=0;i<n;i++){
    console.log("("+ranges.start(i)+","+ranges.end(i)+")");
    }
    };
    // get seekable
    document.getElementById("get_seekable").onclick=function(){
    console.log("audio.seekable:");
    var ranges=audio.seekable;
    var n=ranges.length;
    for(var i=0;i<n;i++){
    console.log("("+ranges.start(i)+","+ranges.end(i)+")");
    }
    };

    // DOM events

    // abort
    audio.addEventListener("abort",function(){
    console.log("event:abort");
    });
    // canplay
    audio.addEventListener("canplay",function(){
    console.log("event:canplay");
    });
    // canplaythrough
    audio.addEventListener("canplaythrough",function(){
    console.log("event:canplaythrough");
    });
    // durationchange
    audio.addEventListener("durationchange",function(){
    updateDuration();
    console.log("event:durationchange");
    });
    // emptied
    audio.addEventListener("emptied",function(){
    updateSrc();
    updateCurrentSrc();
    updateDuration();
    updatePaused();
    updateNetworkState();
    updateReadyState();
    updateBuffered();
    updateSeekable();
    updatePlayed();
    console.log("event:emptied");
    });
    // ended
    audio.addEventListener("ended",function(){
    updateEnded();
    console.log("event:ended");
    });
    // loadeddata
    audio.addEventListener("loadeddata",function(){
    updateNetworkState();
    updateReadyState();
    updateBuffered();
    updateSeekable();
    console.log("event:loadeddata");
    });
    // loadedmetadata
    audio.addEventListener("loadedmetadata",function(){
    console.log("event:loadedmetadata");
    });
    // loadstart
    audio.addEventListener("loadstart",function(){
    console.log("event:loadstart");
    });
    // pause
    audio.addEventListener("pause",function(){
    updatePaused();
    console.log("event:pause");
    });
    // play
    audio.addEventListener("play",function(){
    updatePaused();
    console.log("event:play");
    });
    // playing
    audio.addEventListener("playing",function(){
    console.log("event:playing");
    });
    // progress
    audio.addEventListener("progress",function(){
    updateNetworkState();
    updateReadyState();
    updateBuffered();
    updateSeekable();
    console.log("event:progress");
    });
    // ratechange
    audio.addEventListener("ratechange",function(){
    updatePlaybackRate();
    console.log("event:ratechange");
    });
    // seeked
    audio.addEventListener("seeked",function(){
    console.log("event:seeked");
    });
    // seeking
    audio.addEventListener("seeking",function(){
    console.log("event:seeking");
    });
    // stalled
    audio.addEventListener("stalled",function(){
    console.log("event:stalled");
    });
    // suspend
    audio.addEventListener("suspend",function(){
    console.log("event:suspend");
    });
    // timeupdate
    audio.addEventListener("timeupdate",function(){
    updateCurrentTime();
    updateEnded();
    updatePlayed();
    console.log("event:timeupdate");
    });
    // volumechange
    audio.addEventListener("volumechange",function(){
    updateVolume();
    console.log("event:volumechange");
    });
    // waiting
    audio.addEventListener("waiting",function(){
    console.log("event:waiting");
    });
    updateAutoplay();
    updateControls();
    updateDefaultMuted();
    updateDefaultPlaybackRate();
    updateLoop();
    updatePreload();
    updateSrc();
    updateCurrentSrc();
    updateDuration();
    updateCurrentTime();
    updateVolume();
    updatePaused();
    updateMuted();
    updateEnded();
    updatePlaybackRate();
    updateNetworkState();
    updateReadyState();
    updateBuffered();
    updateSeekable();
    updatePlayed();
    updateError();
    };
    // functions to update info table
    // autoplay
    function updateAutoplay(){
    document.getElementById("autoplay").innerHTML=audio.autoplay;
    }
    // controls
    function updateControls(){
    document.getElementById("controls").innerHTML=audio.controls;
    }
    // defaultMuted
    function updateDefaultMuted(){
    document.getElementById("default_muted").innerHTML=audio.defaultMuted;
    }
    // defaultPlaybackRate
    function updateDefaultPlaybackRate(){
    document.getElementById("default_playback_rate").innerHTML=audio.defaultPlaybackRate;
    }
    // loop
    function updateLoop(){
    document.getElementById("loop").innerHTML=audio.loop;
    }
    // preload
    function updatePreload(){
    document.getElementById("preload").innerHTML=audio.preload;
    }
    // src
    function updateSrc(){
    document.getElementById("src").innerHTML=audio.src;
    }
    // currentSrc
    function updateCurrentSrc(){
    document.getElementById("current_src").innerHTML=audio.currentSrc;
    }
    // duration
    function updateDuration(){
    document.getElementById("duration").innerHTML=audio.duration;
    }
    // currentTime
    function updateCurrentTime(){
    document.getElementById("current_time").innerHTML=audio.currentTime;
    }
    // ended
    function updateEnded(){
    document.getElementById("ended").innerHTML=audio.ended;
    }
    // paused
    function updatePaused(){
    document.getElementById("paused").innerHTML=audio.paused;
    }
    // muted
    function updateMuted(){
    document.getElementById("muted").innerHTML=audio.muted;
    }
    // volume
    function updateVolume(){
    document.getElementById("volume").innerHTML=audio.volume;
    }
    // playbackRate
    function updatePlaybackRate(){
    document.getElementById("playback_rate").innerHTML=audio.playbackRate;
    }
    // networkState
    function updateNetworkState(){
    document.getElementById("network_state").innerHTML=audio.networkState;
    }
    // readyState
    function updateReadyState(){
    document.getElementById("ready_state").innerHTML=audio.readyState;
    }
    // buffered
    function updateBuffered(){
    var ranges=audio.buffered;
    var str="";
    var n=ranges.length;
    for(var i=0;i<n;i++){
    str+="("+ranges.start(i)+","+ranges.end(i)+")";
    if(i!=n-1){
    str+="
    ";
    }
    }
    document.getElementById("buffered").innerHTML=str;
    }
    // seekable
    function updateSeekable(){
    var ranges=audio.seekable;
    var str="";
    var n=ranges.length;
    for(var i=0;i<n;i++){
    str+="("+ranges.start(i)+","+ranges.end(i)+")";
    if(i!=n-1){
    str+="
    ";
    }
    }
    document.getElementById("seekable").innerHTML=str;
    }
    // played
    function updatePlayed(){
    var ranges=audio.played;
    var str="";
    var n=ranges.length;
    for(var i=0;i<n;i++){
    str+="("+ranges.start(i)+","+ranges.end(i)+")";
    if(i!=n-1){
    str+="
    ";
    }
    }
    document.getElementById("played").innerHTML=str;
    }
    // error
    function updateError(){
    document.getElementById("error").innerHTML=audio.error;
    }

    上一篇：用HTML5制作一个简单的弹力球游戏
    下一篇：html5实现完美兼容各大浏览器的播放器
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5中 media（播放器）的api使用指南 html5,中,media,播放器,的,