js音乐控制代码（js控制音乐播放暂停）

发布时间：2023-12-08

js音乐控制代码（js控制音乐播放暂停）

更新：<time datetime="2022-11-10 06:25">2022-11-10 06:25</time>

本文目录一览：

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。
<script type="text/javascript">
$(function() {
    $("#jplayer").jPlayer({
        swfPath: "http://",
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "./resources/message.mp3"
            });
        },
        supplied: "mp3"
    });
});
</script>

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');
  1. 循环播放函数，每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>
        <p>Your browser does not support the audio element</p>
    </audio>
    <div id="volume"></div><br>
    <div id="progressbar"></div><br>
    <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 (m<10?"0"+m:m)+':'+(s<10?"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="sub();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自己去看。

推荐文章