如何安裝使用 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小時內與您取得聯系。

整合營銷服務商