玩玩 <audio> 标签

闲得蛋疼做了一个真实版圆周率之歌,圆周率的每位数字对应一个音符。正好熟悉了下 <audio> 标签的一些用法。

HTML 部分

<h5 id="text" class="text"></h5>  
<audio  
    autoplay
    controls="controls"
    class="audio"
    id="audio"
    src="./audio/blank.mp3"
>
</audio>  

如上 HTML 部分代码是这么写的,<audio> 标签的属性也很明确,指定 src 就可以直接播放了。这里还有一种写法,如下。这种写法会先试着播放 src="./audio/blank.ogg" 的资源,若无法播放则再去播放 src="./audio/blank.wma",一直往下直到可以播放。

<audio>  
    <source
        src="./audio/blank.ogg"
        src="./audio/blank.wma"
        src="./audio/blank.mp3"
    >
</audio>  

注意,用 <source> 引入资源的话,用 js 替换 <source>src 再播放,<audio> 会仍旧播放的原先的音乐资源。

Js 部分

Js 部分的逻辑比较简单,将 PI 转换为数组,然后依次播放数字对应的音频。

const PI = '3.1415926535897932384626433832795028841971693993\  
751058209794459230781640628620899862803482534211706798214808\  
651328230676470938446095505822317253594081284811174502841027\  
019385211095559644622948954930381964428810975665933446128475;

const audio = document.getElementById('audio');  
const textAera = document.getElementById('text');

const arr = PI.replace('.', '').split('');  
let current = -1;  
let text = '';

audio.playbackRate = 10;  
textAera.innerText = text;

function nextSong(num) {  
    audio.src = './audio/' + num + '.mp3';
    current++;
    audio.playbackRate = 3.6;
    audio.play()
}


audio.addEventListener("ended", function () {  
    if (arr.length - 1 > current) {
        text += arr[current + 1];
        textAera.innerText = text;
        nextSong(arr[current + 1])
    } else {
        current = -1;
        text = arr[current + 1];
        textAera.innerText = text;
        nextSong(arr[current + 1])
    }
}, true)