js音樂控制代碼（js控制音樂播放暫停）

本文目錄一覽：

• 1、js怎樣讓Safari可以自動播放背景音樂
• 2、想用怎麼用js實現播放音頻。
• 3、jquery中怎樣控制音樂播放器的音量求代碼
• 4、html js 如何控制音樂打開和關閉
• 5、求js控制音樂代碼

js怎樣讓Safari可以自動播放背景音樂

jquery控制背景音樂開關與自動播放提示音的方法。分享給大家供大家參考。具體如下：

很多人初學網頁製作時在網頁中加入一段背景音樂，聽到音樂響起的那一刻往往都會有一絲的成就感。

這裡就為大家講解如何使用js控制背景音樂播放與停止。具體如下：

一、jquery控制背景音樂開關

複製代碼 代碼如下:

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http//”

html xmlns=”http//” xml:lang=”en”

head

script src=”js/jquery.min.js”/script

script type=”text/javascript”

//加載背景音樂，並自動播放

$(‘#bg_music’).append(’embed id=”m_bg_music” loop=true volume=”60″ autostart=true hidden=true src=”guoan.mp3″ /’);

$(‘#bg_music_btn’).click(function(){

var state = $(‘#bg_music_btn’).attr(‘state’);

if(state == ‘1’)//

{

$(‘#bg_music_btn’).attr(‘state’,’0′);

$(‘#bg_music_btn’).html(‘打開背景音樂’);

$(‘#m_bg_music’).remove();

}else if(state == ‘0’)

{

$(‘#bg_music_btn’).attr(‘state’,’1′);

$(‘#m_bg_music’).remove();

$(‘#bg_music_btn’).html(‘關閉背景音樂’);

$(‘#bg_music’).append(’embed id=”m_bg_music” loop=true volume=”60″ autostart=true hidden=true src=”guoan.mp3″ /’);

}

});

/script

/head

body

!–控制播放–

div id=”bg_music_btn” state=’1’關閉背景音樂/div

!–背景音樂–

div id=”bg_music”/div

/body

/html

以上介紹了jquery如何控制背景音樂開關的方法，接下來再進一步擴展。

二、JQuery自動播放提示音

最早對網站有自動提示音的功能，發現在Discuz論壇中出現。但是它有一個問題就是只支持flash，不支持HTML5，不明確最新版本中是否支持HTML5。

對於Discuz 7.2 版本中，提供了player.swf、pm_1.mp3、pm_2.mp3、pm_3.mp3，然後使用如下腳本來實現:

複製代碼 代碼如下:

div id=”soundplayerlayer” style=”position:absolute;top:-100000px”/div

script type=”text/javascript” reload=”1″

function soundplayer(file) {

$(‘soundplayerlayer’).innerHTML = AC_FL_RunContent(‘id’, ‘pmsoundplayer’, ‘name’, ‘pmsoundplayer’, ‘width’, ‘0′, ‘height’, ‘0′, ‘src’, ‘{$boardurl}images/sound/player.swf’, ‘FlashVars’, ‘sFile={$boardurl}images/sound/pm_’ + file + ‘.mp3′, ‘menu’, ‘false’, ‘allowScriptAccess’, ‘sameDomain’, ‘swLiveConnect’, ‘true’);

}

/script

可惜這個方法局限在flash，在蘋果設備上可能就會遇到麻煩了。

HTML5開源播放器JPlayer支持自動播放提示音

JPlayer支持play事件觸發自動播放提示音。

1. 裝載JPlayer到一個div層，例如#jplayer。

複製代碼 代碼如下:

$(function() {

$(“#jplayer”).jPlayer({

swfPath: “http//”,

ready: function () {

$(this).jPlayer(“setMedia”, {

mp3: “./resources/message.mp3”

});

},

supplied: “mp3”

});

});

body部分加入:div id=”jplayer”/div

裝載JQuery完成後，jplayer的div內容在支持swf的瀏覽器內變成:

複製代碼 代碼如下:

div id=”jplayer” style=”width: 0px; height: 0px;”img id=”jp_poster_0″ style=”width: 0px; height: 0px; display: none;”object height=”1″ width=”1″ id=”jp_flash_0″ data=”http//” type=”application/x-shockwave-flash” style=”width: 0px; height: 0px;”param name=”flashvars” value=”jQuery=jQueryid=jplayervol=0.8muted=false”param name=”allowscriptaccess” value=”always”param name=”bgcolor” value=”#000000″param name=”wmode” value=”opaque”/object/div

在支持HTML5的瀏覽器內變成:

複製代碼 代碼如下:

div id=”jplayer” style=”width: 0px; height: 0px;”img id=”jp_poster_0″ style=”width: 0px; height: 0px; display: none;”audio id=”jp_audio_0″ preload=”metadata” src=”./resources/message.mp3″/audio/div

完成裝載後就是觸發播放的事件了。

2. 觸發播放提示音事件

複製代碼 代碼如下:

$(“#jplayer”).jPlayer(‘play’);

3. 循環播放函數，每5秒播放一次提示音

複製代碼 代碼如下:

function PlaySound() {

$(“#jplayer”).jPlayer(‘play’);

setInterval(“PlaySound()”, 5000);

return true;

}

附錄:

1. 解決無法自動播放提示音的問題

如果在加載JQplayer後，立刻運行播放的觸發事件，沒有任何效果!具體是什麼原因我也不太清楚，估計是因為音頻文件沒有加載上。

2. 解決方法是讓觸發事件等待5秒中執行。

複製代碼 代碼如下:

setTimeout(“$(‘#jplayer’).jPlayer(‘play’)”, 5000);

加載完頁面，5秒後自動播放提示音。

想用怎麼用js實現播放音頻。

1、JS播放音樂需要區分瀏覽器，來使用不用的對象來播放音樂

2、在播放控制上要有【播放】和【停止】來控制音樂的播放

基於以上思路，代碼如下：

SCRIPT type=”text/javascript”  

if(-1 != navigator.userAgent.indexOf(“MSIE”))

{

    //不是微軟IE瀏覽器，則調用Flash來播放音樂

    document.write(‘ OBJECT id=”Player”‘);  

    document.write(‘ classid=”clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6″‘);

    document.write(‘ width=0 height=0  param name=”URL” value=”a.mp3″ / param name=”AutoStart” value=”false” / /OBJECT’);  

}  

else  

{

    //是微軟IE瀏覽器，則調用微軟的Player對象來直接播放音樂

    document.write(‘ OBJECT id=”Player”‘);  

    document.write(‘ type=”application/x-ms-wmp”‘);  

    document.write(‘ autostart=”false” src= “a.mp3” width=0 height=0 /OBJECT’);  

}  

/SCRIPT  

input type=button value=”播放” onclick=”Player.controls.play();” /

input type=button value=”停止” onclick=”Player.controls.stop();” /

jquery中怎樣控制音樂播放器的音量求代碼

!DOCTYPE html

html

head

    style

        #player{

  position:relative;

  margin:50px auto;

  width:300px;

  text-align:center;

  font-family:Helvetica, Arial;

}

#playpause{

  border:1px solid #eee;

  cursor:pointer;

  padding:12px 0;

  color:#888;

  font-size:12px;

  border-radius:3px;

}

#playpause:hover{

  border-color: #ccc;

}

#volume, #progressbar{

  border:none; 

  height:2px;

}

#volume{

  background:hsla(180,75%,50%,1);

}

#progressbar{

  background:#ccc;

}

.ui-slider-handle{

  border-radius:50%;

  top: -5px !important;

  width: 11px !important;

  height: 11px !important;

  margin-left:-5px !important;

}

    /style

    script src=”/scripts/snippet-javascript-console.min.js?v=1″/script

    /head

body

    link rel=”stylesheet” href=””

script src=””/script

script src=””/script

div id=”player” 

  audio id=”audio” src=”” autoplay loop

    pYour browser does not support the audio element /p

  /audio  

  div id=”volume”/divbr

  div id=”progressbar”/divbr 

  div id=”playpause”/div

/div

    script type=”text/javascript”

        $(function() {

  var $aud = $(“#audio”),

      $pp  = $(‘#playpause’),

      $vol = $(‘#volume’),

      $bar = $(“#progressbar”),

      AUDIO= $aud[0];

  AUDIO.volume = 0.75;

  AUDIO.addEventListener(“timeupdate”, progress, false);

  function getTime(t) {

    var m=~~(t/60), s=~~(t % 60);

    return (m10?”0″+m:m)+’:’+(s10?”0″+s:s);

  }

  function progress() {

    $bar.slider(‘value’, ~~(100/AUDIO.duration*AUDIO.currentTime));

    $pp.text(getTime(AUDIO.currentTime));

  }

  $vol.slider( {

    value : AUDIO.volume*100,

    slide : function(ev, ui) {

      $vol.css({background:”hsla(180,”+ui.value+”%,50%,1)”});

      AUDIO.volume = ui.value/100; 

    } 

  });

  $bar.slider( {

    value : AUDIO.currentTime,

    slide : function(ev, ui) {

      AUDIO.currentTime = AUDIO.duration/100*ui.value;

    }

  });

  $pp.click(function() {

    return AUDIO[AUDIO.paused?’play’:’pause’]();

  });

});

    /script

/body

/html

html js 如何控制音樂打開和關閉

實現控制網站背景音樂的播放暫停在html5中是非常容易和簡單的，僅僅幾行代碼即可實現。

首先在網頁中嵌入背景音樂，html5代碼為：

a class=”mscBtn” id=”audioBtn” style=”cursor:pointer;”/a

audio id=”bgMusic” src=”” autoplay=”autoplay” loop=”loop”/audio

通過audio的id即可控制音樂的播放（play()）和暫停（pause()），同時通過改變class改變按鈕的背景圖片，js代碼為（前提是要引入jq）：

var music = document.getElementById(“bgMusic”);

$(“#audioBtn”).click(function(){

if(music.paused){music.play();

$(“#audioBtn”).removeClass(“pause”).addClass(“play”);

}else{music.pause();

$(“#audioBtn”).removeClass(“play”).addClass(“pause”);}});

css樣式為：

.pause {background-position: 0 bottom;}

.mscBtn {height: 50px;

background: #fff url() no-repeat;

display: block;}

求js控制音樂代碼

!–

下面是你的音頻

—

video

id=”video”

controls=”controls”

source

src=”音頻文件地址”

type=”video/mp4″

你的瀏覽器不支持html5的video標籤

/video

!–下面是你的控制按鈕–

a

href=”#”

onclick=”p();return

false;”播放/a

a

href=”#”

onclick=”s();return

false;”暫停/a

a

href=”#”

onclick=”add();return

false;”增大音量/a

a

href=”#”

onclick=”subc();return

false;”減小音量/a

!–下面是js腳本–

script

var

music

=

document.getElementById(“video”);

//

獲得音樂對象

function

p(){music.play();}

//

開始播放

function

s(){music.pause();}

//

暫停播放

function

add(){music.volume

+=

0.1;}

//

增大音量

function

sub(){music.volume

-=

0.1;}

//

減小音量

/script

沒什麼好解釋的，都是js提供的方法，沒有任何業務邏輯，關於這個標籤的其他操作可以去w3school自己去看。