如何安装使用 Qt 5 的音频播放器 Audacious 4.0 - Linux 中国

udacious 是一个开源音频播放器，可用于包括 Linux 在内的多个平台。继上次发布主版本将近 2 年后，Audacious 4.0 带来了一些重大变化。

来源：https://linux.cn/article-12250-1.html
作者：Ankush Das
译者：geekpi

Audacious 是一个开源音频播放器，可用于包括 Linux 在内的多个平台。继上次发布主版本将近 2 年后，Audacious 4.0 带来了一些重大变化。

最新版本的 Audacious 4.0 默认带 Qt 5 用户界面。你仍然可以和以前一样使用旧的 GTK2 UI，但是，新功能仅会添加到 Qt UI 中。

让我们看下发生了什么变化，以及如何在 Linux 系统上安装最新的 Audacious。

Audacious 4.0 关键变化和功能

当然，主要的变化是默认使用 Qt 5 UI。除此之外，他们的官方公告中提到了许多改进和功能补充，它们是：

单击播放列表列头可对播放列表进行排序
拖动播放列表列头会更改列顺序
应用中的音量和时间步长设置
隐藏播放列表标签的新选项
按路径对播放列表排序，现在将文件夹排序在文件后面
实现了额外的 MPRIS 调用，以与 KDE 5.16+ 兼容
新的基于 OpenMPT 的跟踪器模块插件
新的 VU Meter 可视化插件
添加了使用 SOCKS 网络代理的选项
换歌插件现在可在 Windows 上使用
新的“下一张专辑”和“上一张专辑”命令
Qt UI 中的标签编辑器现在可以一次编辑多个文件
为 Qt UI 实现均衡器预设窗口
歌词插件获得了在本地保存和加载歌词的能力
模糊范围和频谱分析器可视化已移植到 Qt
MIDI 插件 “SoundFont 选择”已移植到 Qt
JACK 输出插件获得了一些新选项
添加了无限循环 PSF 文件的选项

如果你以前不了解它，你可以轻松安装它，并使用均衡器和 LADSP 效果器来调整音乐体验。

如何在 Ubuntu 上安装 Audacious 4.0

值得注意的是，非官方 PPA 是由 UbuntuHandbook 提供的。你可以按照以下说明在 Ubuntu 16.04、18.04、19.10 和 20.04 上进行安装。

1、首先，你必须在终端中输入以下命令将 PPA 添加到系统中：

sudo add-apt-repository ppa:ubuntuhandbook1/apps

2、接下来，你需要从仓库中更新（刷新）软件包信息，然后继续安装该应用。方法如下：

sudo apt update
sudo apt install audacious audacious-plugins

就是这样。你无需执行其他任何操作。无论什么情况，如果你想删除 PPA 和软件，只需按顺序输入以下命令：

sudo add-apt-repository --remove ppa:ubuntuhandbook1/apps
sudo apt remove --autoremove audacious audacious-plugins

你也可以在它的 GitHub 页面上查看有关源码的更多信息，并根据需要在其他 Linux 发行版上进行安装。

Audacious 源代码

总结

新功能和 Qt 5 UI 开关对于改善用户体验和音频播放器的功能应该是一件好事。如果你是经典 Winamp 界面的粉丝，它也可以正常工作。但缺少其公告中提到的一些功能。

你可以尝试一下，并在下面的评论中让我知道你的想法！

via: https://itsfoss.com/audacious-4-release/

作者： Ankush Das 选题： lujun9972 译者： geekpi 校对： wxy

本文由 LCTT 原创编译， Linux中国荣誉推出

点击“了解更多”可访问文内链接

在多个HTML页面之间切换时持续播放背景音乐，可以使用JavaScript和localStorage来实现。这里有一个简单的实现方案：

创建一个隐藏的音频播放器: 在每个HTML页面的<body>标签内添加一个隐藏的音频标签，并设置自动播放和循环播放属性。

使用JavaScript控制音频状态: 当页面加载时，检查localStorage中是否有音乐正在播放的状态，如果有，则恢复播放。同时，当页面离开时，记录音乐的播放状态到localStorage。

下面是一个简化版的多页面背景音乐连续播放的Demo示例。这个例子包含两个HTML文件：index.html 和 page2.html。请确保你有相应的音频文件（如music.mp3）并放置在与HTML文件相同的目录下。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>首页</title>
        <style>
            #backgroundMusic {
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>首页</h1>
        <p>这是首页，背景音乐会持续播放。</p>
        <a href="page2.html">前往第二页</a>

        <audio controls id="backgroundMusic" loop>
            <source src="https://img.mtsws.cn/LightPicture/2023/08/45f935a39d0189c0.mp3" type="audio/mpeg" />
            您的浏览器不支持 audio 元素。
        </audio>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var audio = document.getElementById('backgroundMusic')
                setupMusic(audio)
            })

            function setupMusic(audio) {
                var musicTime = parseFloat(localStorage.getItem('musicTime')) || 0
                var isPlaying = localStorage.getItem('musicPlaying') === 'true'

                audio.currentTime = musicTime
                if (isPlaying) {
                    audio.play().catch(function (error) {
                        console.error('自动播放被阻止:', error)
                    })
                }

                audio.onplay = function () {
                    localStorage.setItem('musicPlaying', true)
                }
                audio.onpause = function () {
                    localStorage.setItem('musicPlaying', false)
                }
                audio.ontimeupdate = function () {
                    localStorage.setItem('musicTime', audio.currentTime)
                }
            }
        </script>
    </body>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二页</title>
    <style>
        #backgroundMusic { display: none; }
    </style>
</head>
<body>

<h1>第二页</h1>
<p>切换到第二页，背景音乐仍然连续播放。</p>
<a href="index.html">返回首页</a>

<audio id="backgroundMusic" src="music.mp3" loop></audio>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var audio = document.getElementById('backgroundMusic');
        setupMusic(audio);
    });

    // 与index.html中相同的setupMusic函数，确保音乐播放逻辑一致
    function setupMusic(audio) {/*...函数内容与上文相同...*/}
</script>
</body>
</html>

在这个示例中，index.html 和 page2.html 都包含了相同的JavaScript逻辑来管理背景音乐的播放状态和时间。当用户在页面间导航时，音乐将会无缝继续播放，而不是重新开始。请根据实际需要调整音频文件路径和其他细节。

节概览：

进度条
音轨原理

这一章主要分享两个东西，分别是进度条和音轨。进度条相对来说比较简单，于是先讲。

这是上一次绘制好的音乐播放器，本节也在它的基础上进行完善。

进度条

对于进度条，它可以实时地展示音乐的进度，相信大家都不陌生。

1.绘制进度条

我们在按钮区的上面，也就是屏幕底部的区域绘制进度条。

上代码：

<body>
 <div id='music' class='music'>
 <div class='screen'>
 <i id='music-icon' class="iconfont icon-yinle"></i>
 <div class='progress'>
 <div class='time'></div>
 <div class='bar'></div>
 </div>
 </div>
 <div class='buttons'>
 <i id='prev' class="iconfont icon-icon"></i>
 <i id='play' class="iconfont icon-bofanganniu"></i>
 <i id='pause' class="iconfont icon-zanting" style="display:none"></i>
 <i id='next' class="iconfont icon-icon1"></i>
 </div>
 <span id='info' class='info'></span>
 
 </div>
</body>

代码中progress的部分就是我们需要添加的进度条区域。

给它宽度、高度和背景色：

.music .screen .progress {
 width:100%;
 height:40px;
 background:#ccc;
}

我们希望让它紧挨着播放器屏幕的底部，只需要给它一个定位就行了。关于元素的定位，在之前的章节中我已经详细地讲过，所以在这里就不再赘述了。

position: absolute;
bottom:0;

下来了。

我们将该区域分为上下两块

.music .screen .progress .time {
 border-bottom:1px solid #fff; /*演示用，为了看清楚上下元素块的界限*/
 height:20px; /*高度为父盒子的一半*/
 line-height:20px; /*为了让文字垂直居中*/
 text-align: right; /*文字右对齐*/
}

加上一个测试的时间数据：

<div class='time'>1:30</div>

确认没问题后，把背景色和边框都去掉。同时调色和优化一下：

.music .screen .progress {
 width:100%;
 height:40px;
 position: absolute;
 bottom:0;
}
.music .screen .progress .time {
 color: #fff;
 height:20px;
 line-height:20px; /*为了让时间垂直居中*/
 text-align: right; /*文字右对齐*/
 padding-right: 10px;
}

这样就好看多了吧。

2.动态获取变化的时间

一步一步来，接下来我们先拿到正在播放的时间：

/**
 * 当音频时间正常更新的时候
 */
musicBox.musicDom.ontimeupdate = function(){
 var currentTime = Math.floor(this.currentTime); //获取当前时间
 var m = parseInt(currentTime / 60);//分钟
 var s = parseInt(currentTime % 60);//秒钟
 var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化
 console.log(time); //打印出来看看
}

ontimeupdate你可以理解为一个监听事件，每次时间更新的时候，就会自动进入里面的逻辑。

在图中可以很清晰地看到，我们已经能拿到正在播放的时间了。

接下来，我们将这个动态变化的时间在屏幕上显示出来。

document.getElementsByClassName('time')[0].innerHTML = time;

嗯，这样就行了。

2.计算百分比

// 百分比 = 当前时长 ÷ 总时长 × 100%
var total = this.duration;//总时长
console.log(currentTime + '=======' + total);
document.getElementsByClassName('time')[0].innerHTML = Math.floor(currentTime / total * 100) + "%";

有了百分比，进度条其实也就有了。我们现在将bar的样式加上，宽度默认0%

.music .screen .progress .bar {
 height:20px;
 background: #eee;
 width:0%; 
 opacity: 0.6;
}

然后动态改变宽度：

var total = this.duration;
document.getElementsByClassName('bar')[0].style.width = Math.floor(currentTime / total * 100) + "%";

成功了，进度条就这么产生了。其中最关键的一点就是audio标签元素自带的ontimeupdate 事件，我们可以在里面获取总时长和当前时长，然后就可以计算出百分比，通过给div动态设置宽度来实现进度条的效果。

考虑到篇幅，我本章就不单独封装插件了，将进度条集成到我们的musicBox里面，还需要用到回调函数等一系列的知识点。

音轨

1. 绘制音轨盒子

<div id='music' class='music'>
 <div id='trackBox' class="trackBox"></div>
 <div class='screen'>
 <i id='music-icon' class="iconfont icon-yinle"></i>
 <div class='progress'>
 <div class='time'></div>
 <div class='bar'></div>
 </div>
 </div>
 <div class='buttons'>
 <i id='prev' class="iconfont icon-icon"></i>
 <i id='play' class="iconfont icon-bofanganniu"></i>
 <i id='pause' class="iconfont icon-zanting" style="display:none"></i>
 <i id='next' class="iconfont icon-icon1"></i>
 </div>
 <span id='info' class='info'></span>
 
</div>

为了方便定位，我们将 trackBox 画在music盒子里面。

.trackBox {
 position:absolute;
 width:400px;
 height:220px;
 border: 1px solid #ccc;
 z-index: 3;
 background: #333;
 left:210px;
 top : -2px;
 border-radius: 6px;
}

2. 画第一条音轨

<div id='trackBox' class="trackBox">
 <i class='items'></i>
</div>
.trackBox .items {
 position: absolute;
 width:10px;
 height:100px;
 background:#eee;
}

我们希望音轨靠着下方，并且它们之间能有一个区分，于是添加这两个属性：

bottom:0px;
border: 1px solid #ccc;

OK，下来了。

2. 画所有的音轨

一个音轨肯定不够，我们需要根据音轨盒子的宽度和每一条音轨的宽度，来计算出一共需要多少条音轨：

/*获取音轨盒子*/
var trackBox = utils.dom('#trackBox');
/*音轨盒子的宽度*/
var maxWidth = trackBox.clientWidth;
/*音轨的单个宽度*/
var singleWidth = 10;
/*计算音轨的最大数量*/
var len = Math.floor(maxWidth / singleWidth) ;
alert('音轨盒子最多盛放' + len + '条音轨');

//拼接音轨
var tracks = "";
for(var i = 0;i < len; i++){
 /*计算位置*/
 var left = 10 * i + 'px';
 tracks += "<i class='items' style='left:"+left+"'></i>";
}
trackBox.innerHTML = tracks;

拼接后的效果：

2. 通过随机数让音轨动起来

之前的章节 js常用方法和一些封装（2） -- 随机数生成中，正好有一个随机数的方法，所谓养兵千日，用兵一时啊。

我们把那个随机数的方法添加到工具包：

util.js

randomNum : function (num){
 return Math.floor(Math.random()*(num+1));
}

测试：

//模拟音轨动画
setInterval(function(){
 for(var i = 0;i < len; i++){
 console.info(i);
 document.getElementsByClassName('items')[i].style.height = utils.randomNum(110) + 'px';
 }
},200);

效果：

原理就是用了一个js定时器，每隔200毫秒就改变所有音轨的高度，当然，高度是一个随机数值。

至于音轨和播放器的对接，虽然我已经写好，并且已经集成到musicBox里面，但是里面牵扯到比较多的知识点，写起来需要很多时间，所以暂且先放一放吧。

感悟

音乐播放器至此算是完成了一个1.0版本，以后看情况我会继续将这个案例更新下去，甚至还可能对接后台，连数据库等等。

在工作的日子里，我曾经迷茫过，尤其是刚开始做编程的工作时，非常迷茫。

每天都是增删改查，增删改查，就觉得很没意思。

一段时间下来，我开始迷茫了，不知道自己该学一些什么东西。

感觉技术太多，什么都想学，却又怕没时间。

在这个信息爆炸、日新月异的时代，技术更新得非常快，很多人都在各种新技术的浪潮下变得不知所措。我就有这样的体会，于是看各种书，各种视频，生怕自己跟不上时代的节奏。

可是，我一直以来都忽略了一个重点，那就是——我是否真的对这个行业感兴趣？

如果在几年前，我会说是的，正因为对计算机的兴趣，我才会放弃之前所学的专业，踏入 Java 、JavaScript 的坑中。

再后来，我发现一个道理，不论你现在的工作是什么，都请尽可能地去爱上他。不要为了生计而去做一份工作，如果实在办不到的话，就给自己撒一个美丽的谎言吧。

不然的话，软件开发到了后期你会很迷茫的。

给自己一个温馨的微笑，学着热爱这个行业，这个工作，就是对自己最大的奖赏。

享受编程的乐趣，怀着感恩的心去体会每一天生活中的细节。

在线咨询

上一篇：Html+CSS - 1段CSS让表格更漂亮建议收藏
下一篇：网页颜色一键变灰？分享 1 段优质 CSS 代码片段！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商