wp 优化 / 网站建设

代码实现网站音乐播放器

言七墨 · 11月26日 · 2019年 · 483次已读

教程:

  • 添加功能代码:

将以下代码放到footer.php中</body>上面即可:

< section class = "u-audio hidden"data - src = "http://img.qimok.cn/music/Xun%28%E6%98%93%E7%A1%95%E6%88%90%29%20-%20%E6%88%91%E6%98%AF%E4%BD%A0%E7%9A%84%E5%BD%B1%E5%AD%90.mp3" > </section>
<div class="btnAudio" id="btnAudio"></div > <script >
var bg_audio_val = true;
var bg_audio = new Audio();
function audio_init() {
    var options_audio = {
        loop: true,
        preload: "auto",
        src: $('.u-audio').attr('data-src')
    }
    for (var key in options_audio) {
        bg_audio[key] = options_audio[key];
    }
    bg_audio.load();
    audio_addEvent();
    bg_audio.play();
}
function audio_addEvent() {
    $("#btnAudio").on('click', audio_control);
    $(bg_audio).on('play',
    function() {
        bg_audio_val = false;
        $('#btnAudio').addClass('rotate1circle');
    }) $(bg_audio).on('pause',
    function() {
        $('#btnAudio').removeClass('rotate1circle');
    })
}
function audio_control() {
    if (!bg_audio_val) {
        bg_audio.pause();
        bg_audio_val = true;
    } else {
        bg_audio.play();
    }
}
audio_init(); < /script>/
  • 添加样式代码:

将下面代码添加到style.css中即可:

.btnAudio {
	width: 36px;
	height: 36px;
	position: fixed;
	rightright: 8.8px;
	top: 130px;
	overflow: hidden;
	background: url("图片地址") left top no-repeat;
	z-index: 1050;
}

.rotate1circle {
	-webkit-animation: rotate1circle 1s linear infinite;
}

注意:上面图片地址换成你自己的即可。

0 条回应