【博客】博客添加音乐（备用）

博客音乐

发布时间 : 2024-08-29 09:40

字数:1.2k 阅读 :

参考资料
复制网易云音乐插件代码
代码
增加功能

参考主题博主叶落阁添加音乐插件的文章，在自己的博客中添加音乐，但是该功能需要加载音乐控件和flash,影响博客初始加载速度，固没有使用，只是作为魔改的备忘。

参考资料

3-hexo 添加音乐插件

复制网易云音乐插件代码

参照主题博主的步骤，打开网易云网页-播放一首歌曲-左上角找到生成外链播放器-复制iframe插件html代码。

代码

具有的功能：

<div> 的 style 中 bottom 和 right 可以调整位置；
鼠标可以在音乐控件的上边沿点击自由拖动。

将上面复制得到的代码外层增加一层div，并把修改后的代码放在
[RootBlog]\themes\3-hexo\layout_partial\footer.ejs 的最后面：

<div id="musicMouseDrag" style="position:fixed; z-index: 9999; bottom: 10px; left: -330px; transition: left 0.3s;">
    <div id="musicDragArea" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: move; z-index: 10;"></div>
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86"
        src="//music.163.com/outchain/player?type=2&id=38592976&auto=1&height=66"></iframe>
    <div id="toggleButton" style="position: absolute; left: 100%; top: 0; width: 10px; height: 86px; background-color: #42b983; cursor: pointer; z-index: 11; border-radius: 0 10px 10px 0;"></div>
</div>

在刚刚添加的代码后面，再添加下面代码，鼠标就可以在音乐控件的上边沿点击拖动：

<!--以下代码是为了支持随时拖动音乐控件的位置，如没有需求，可去掉下面代码-->
<script>
    var $DOC = $(document)
    $('#musicMouseDrag').on('mousedown', function (e) {
      // 阻止文本选中
      $DOC.bind("selectstart", function () {
        return false;
      });
      $('#musicDragArea').css('height', '100%');
      var $moveTarget = $('#musicMouseDrag');
      $moveTarget.css('border', '1px dashed grey')
      var div_x = e.pageX - $moveTarget.offset().left;
      var div_y = e.pageY - $moveTarget.offset().top;
      $DOC.on('mousemove', function (e) {
        var targetX = e.pageX - div_x;
        var targetY = e.pageY - div_y;
        targetX = targetX < 0 ? 0 : (targetX + $moveTarget.outerWidth() >= window.innerWidth) ? window.innerWidth - $moveTarget.outerWidth() : targetX;
        targetY = targetY < 0 ? 0 : (targetY + $moveTarget.outerHeight() >= window.innerHeight) ? window.innerHeight - $moveTarget.outerHeight() : targetY;
        $moveTarget.css({'left': targetX + 'px', 'top': targetY + 'px', 'bottom': 'inherit', 'right': 'inherit'})
      }).on('mouseup', function () {
        $DOC.unbind("selectstart");
        $DOC.off('mousemove')
        $DOC.off('mouseup')
        $moveTarget.css('border', 'none')
        $('#musicDragArea').css('height', '10px');
      })
    })
</script>

增加功能

虽然音乐面板可以自由移动，但有时候还是会遮挡页面不停拖动面板，所以使用GPT生成一段代码，让音乐面板在网页左边能够悬浮，同时也保留了原来自由拖动的功能，把上述添加的代码修改为：

<div id="musicMouseDrag" style="position:fixed; z-index: 9999; bottom: 10px; left: -330px; transition: left 0.3s;">
    <div id="musicDragArea" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: move; z-index: 10;"></div>
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86"
        src="//music.163.com/outchain/player?type=2&id=38592976&auto=1&height=66"></iframe>
    <div id="toggleButton" style="position: absolute; left: 100%; top: 0; width: 15px; height: 86px; background-color: #42b983; cursor: pointer; z-index: 11; border-radius: 0 10px 10px 0;"></div>
</div>

<!-- 以下代码是为了支持随时拖动音乐控件的位置，并实现接触左侧隐藏功能 -->
<script>
    var $DOC = $(document);
    var isDragging = false;

    $('#toggleButton').on('mousedown', function (e) {
        // 阻止文本选中
        $DOC.bind("selectstart", function () {
            return false;
        });

        $('#musicDragArea').css('height', '100%');
        var $moveTarget = $('#musicMouseDrag');
        $moveTarget.css('border', '1px dashed grey');
        var div_x = e.pageX - $moveTarget.offset().left;
        var div_y = e.pageY - $moveTarget.offset().top;
        isDragging = true;

        $DOC.on('mousemove', function (e) {
            if (isDragging) {
                var targetX = e.pageX - div_x;
                var targetY = e.pageY - div_y;
                targetX = targetX < -330 ? -330 : (targetX + $moveTarget.outerWidth() >= window.innerWidth) ? window.innerWidth - $moveTarget.outerWidth() : targetX;
                targetY = targetY < 0 ? 0 : (targetY + $moveTarget.outerHeight() >= window.innerHeight) ? window.innerHeight - $moveTarget.outerHeight() : targetY;
                $moveTarget.css({'left': targetX + 'px', 'top': targetY + 'px', 'bottom': 'inherit', 'right': 'inherit'});
            }
        }).on('mouseup', function () {
            isDragging = false;
            $DOC.unbind("selectstart");
            $DOC.off('mousemove');
            $DOC.off('mouseup');
            $moveTarget.css('border', 'none');
            $('#musicDragArea').css('height', '10px');

            // 如果面板接触左边缘则自动隐藏
            if (parseInt($moveTarget.css('left')) <= 0) {
                $moveTarget.css('left', '-330px');
            }
        });
    });

    // 点击按钮显示/隐藏面板
    $('#toggleButton').on('click', function () {
        var $musicPanel = $('#musicMouseDrag');
        if ($musicPanel.css('left') === '0px') {
            $musicPanel.css('left', '-330px');
        } else {
            $musicPanel.css('left', '0px');
        }
    });
</script>

Demo

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 3415226167@qq.com