음성플레이어 구현 (ie지원)

jplayer로 플레이어를 붙여봤는데 확인해보니 ie낮은 버전에서는 플레이가 되지를 않는다.

 

audio태그 역시 구 ie는 지원을 잘 해주지 않기 땜에...또 이리저리 소스를 주어다 조합해 보았다.

음 그리고 bject태그는 object태그이다. 이상한 스크립트가 붙어서 o를 뺐음

 

우선 html부터

<!-- 컨트롤버튼 --> <p> <a href="#" class="jp-play"><img src="skin/play.png" alt="play" style="width:10%" />재생</a> <a href="#" class="jp-pause"><img src="skin/pause.png" alt="pause" style="width:10%" />일시정지</a> </p> <!-- 플레이어 --> <p> <audio controls id="objAP" loop="true"> <source src="mp3/gae.mp3" type="audio/mpeg" /> <source src="mp3/gae.ogg" type="audio/ogg"> <!-- ie7,8은 audio source태그가 안먹으므로 오브젝트태그로 해준다.--> <bject id="objAP_8" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="display:none;"> <param name="URL" value="mp3/gae.mp3" /> <param name="uiMode" value="invisible" /> <param name="autoStart" value="false" /> <param name="volume" value="80" /> <param name="playCount" value="10000" /> </bject> </audio> </p>

다음은 스크립트 소스~

<script> $(document).ready(function(){ $(".jp-pause").hide(); //일단 일시정지버튼은 안보이게... $('.jp-play').click(function () { //플레이버튼 클릭했을 때 액션 $(".jp-play").hide(); //플레이버튼대신 $(".jp-pause").show(); //멈춤버튼이 나오고 if (browser.name == "msie" && parseInt(browser.version) <9) //ie 7,8이면 { document.getElementById('objAP_8').controls.play(); //이렇게 재생 }else{ //아니면 $("#objAP").trigger('play'); //이렇게 재생 } }); $('.jp-pause').click(function () { //멈춤버튼 클릭시 액션 $(".jp-pause").hide(); //멈춤버튼을 숨기고 $(".jp-play").show(); //플레이버튼이 나옴 if (browser.name == "msie" && parseInt(browser.version) <9) //ie 7,8이면 { document.getElementById('objAP_8').controls.pause(); //이렇게 멈춤 }else{ //아니면 $("#objAP").trigger('pause'); //이렇게 멈춤 } }); $("#objAP").hide(); 일단 플레이어는 안보여줌 }); //browser detect 브라우저 체크 함수 var browser = (function() { var s = navigator.userAgent.toLowerCase(); var match = /(webkit)[ \/](\w.]+)/.exec(s) || /(opera)(?:.*version)?[ \/](\w.]+)/.exec(s) || /(msie) ([\w.]+)/.exec(s) || !/compatible/.test(s) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(s) || []; return { name: match[1] || "", version: match[2] || "0" }; }()); </script>