如何写最基础的播放音频界面

MM2LYF

于 2022-09-05 23:26:17 发布

阅读量167

点赞数

文章标签：音视频 servlet java

本文链接：https://blog.csdn.net/MM2LYF/article/details/126714712

版权

这篇就是基础介绍写法

这里要用到的标签是<audio>,它其实和<img>、<video>的用法差不多:

< img src=" ">

< audio src=" ">

< video src=" ">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>听音小屋</title>
    
</head>
<body>

<audio src="./光年之外.mp3" ></audio>

</body>
</html>

但是光是如此播放不了的，没有控制面板

所以我们要加上它的controls属性

<audio src="./光年之外.mp3" controls ></audio>

这样才能播放

关于它的js呢

在控制台上操作

我们可以看出oAudio的类型是一个对象，而这个对象实际上就是HTMLAudioElement

所以我们可以通过这个对象控制播放器

直接上方法

oAudio.src="……" 换歌

oAudio.play() 播放

oAudio.pause() 暂停

oAudio.currentTime当前时间（修改oAudio.currentTime也可以修改当前播放位置）

oAudio.duration 总时长

oAudio.muted 静音（如果oAudio.muted =true就静音，false就取消静音）

oAudio.volume 控制声音大小（最大值为1）

利用这些方法至少可以做出能用的播放器

具体写法

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>播放音乐</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <audio src="./光年之外.mp3"></audio>
    <button class="playPause">播放</button>
    <button class="prev">上一首</button>
    <button class="next">下一首</button>
    <div>当前时间: <span class="currentTime"></span></div>
    <div>总时间: <span class="duration"></span></div>
    <div>
        <input type="text" id="progress"><button class="jumpTo">跳到此处</button>
    </div>
    <button class="volumeUp">声音增加</button>
    <button class="volumeDown">声音减少</button>

    <script>
        var mp3 = ['光年之外', '句号', '诀爱']
        var currentIndex = 0
        var playing = false

        var oAudio = document.querySelector('audio')
        document.querySelector('.playPause').onclick = function() {
            if (playing) {
                oAudio.pause()
                this.textContent = '播放'
            } else {
                oAudio.play()
                this.textContent = '暂停'
            }

            playing = !playing
        }

        document.querySelector('.prev').onclick = function() {
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = 2;
            }
            var name = "./" + mp3[currentIndex] + ".mp3";
            oAudio.src = name
        }


        document.querySelector('.next').onclick = function() {
            currentIndex++;
            if (currentIndex > 2) {
                currentIndex = 0;
            }
            var name = "./" + mp3[currentIndex] + ".mp3";
            oAudio.src = name
        }

        oAudio.ontimeupdate = function() {
            var ct = oAudio.currentTime
            var ctm = Math.floor(ct / 60)
            var cts = Math.floor(ct % 60)
            document.querySelector('.currentTime').textContent = ctm + ":" + cts


            var dt = oAudio.duration
            var dtm = Math.floor(dt / 60)
            var dts = Math.floor(dt % 60)
            document.querySelector('.duration').textContent = dtm + ":" + dts
        }

        document.querySelector('.jumpTo').onclick = function() {
            var p = parseInt(document.querySelector('#progress').value)
            if (p < 0) { p = 0 }
            if (p > 100) { p = 100 }

            var ct = p / 100 * oAudio.duration;
            oAudio.currentTime = ct

            document.querySelector('#progress').value = ''
        }

        document.querySelector('.volumeUp').onclick = function() {
            var volume = oAudio.volume;
            volume += 0.1
            if (volume > 1) {
                volume = 1
            }
            oAudio.volume = volume
        }

        document.querySelector('.volumeDown').onclick = function() {
            var volume = oAudio.volume;
            volume -= 0.1
            if (volume < 0) {
                volume = 0
            }
            oAudio.volume = volume
        }
    </script>
</body>
</html>

MM2LYF

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何写最基础的播放音频界面

我们可以看出oAudio的类型是一个对象，而这个对象实际上就是HTMLAudioElement。静音（如果oAudio.muted =true就静音，false就取消静音）当前时间（修改oAudio.currentTime也可以修改当前播放位置）但是光是如此播放不了的，没有控制面板。利用这些方法至少可以做出能用的播放器。所以我们可以通过这个对象控制播放器。它的controls属性。这篇就是基础介绍写法。
复制链接

扫一扫