HTML Audio对象属性、方法、事件及音乐播放器应用

分为两部分，前面主要介绍Html5为Audio对象提供了用于DOM操作的方法、属性和事件；

后面主要通过使用audio jquery bootstrap在浏览器底部实现的音乐播放器。

效果：

Audio对象

常用方法

方法	描述
load()	加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。
play()	播放媒体文件。如果音频没有加载，则加载并播放；如果音频是暂停的，则变为播放。
pause()	暂停播放媒体文件。
canPlayType()	测试浏览器是否支持指定的媒体类型。

常用属性

属性	描述
currentSrc	返回当前音频的URL
currentTime	设置或返回音频中的当前播放位置（秒）
duration	返回音频的长度（秒）
ended	返回音频的播放是否已结束
error	返回表示音频错误状态的MediaError独享
paused	设置或返回音频是否暂停
muted	设置或返回是否关闭声音
volume	设置或返回音频的音量
autoplay	布尔值；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成
controls	如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放
loop	布尔值；如果声明该属性，将循环播放音频

常用事件

事件	描述
play	当执行方法play()时触发
playing	正在播放时触发
pause	当执行了方法pause()时触发
timeupdate	当播放位置被改变时触发
ended	当播放结束后停止播放时触发
waiting	在等待加载下一帧时触发
ratechange	在当前播放速率改变时触发
volumechange	在音量改变时触发
canplay	以当前播放速率，需要缓冲时触发
canplaythrough	以当前播放速率，不需要缓冲时触发
durationchange	当播放时长改变时触发
loadstart	在浏览器开始在网上寻找数据时触发
progress	当浏览器正在获取媒体文件时触发
suspend	当浏览器暂停获取媒体文件，且文件获取并没有正常结束时触发
abort	当中止获取媒体数据时触发，但这种中止不是由错误引起的
error	当获取媒体文件过程中出错时触发
emptied	当所在网络变为初始化状态时触发
stalled	浏览器尝试获取媒体数据失败时触发
loadedmetadata	在加载完媒体元数据时触发
loadeddata	在加载完当前位置的媒体播放数据时触发
seeking	浏览器正在请求数据时触发
seeked	浏览器停止请求数据时触发

以上方法、属性和事件通过JavaScript来操作。

音乐播放器

音乐播放器分为四个部分，服务端、html页面、样式文件、脚本文件。

Html页面

使用了bootstrap中的图标，需要创建css、fonts文件夹；

引入bootstrap.min.js/bootstrap.min.js及fonts中所有文件，可以自行下载。

内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="music_main">
    <div class="music_left">
        <img class="music_img" id="music_img" src="./img/1.jpg" alt="">
    </div>
    <audio id="player">
        <source src="./audio/不分手的恋爱%20–%20汪苏泷.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
    </audio>
    <div class="play_left">
        <div class="music_title">
            <span class="music_name">不分手的恋爱 – 汪苏泷</span>
            <span class="totalTimeSpan">/03:25</span>
            <span class="playTimeSpan">00:00</span>
        </div>
        <div class="music_rate">
            <div class="music-progress"></div>
        </div>
    </div>
    <div class="play_right">
        <i class="glyphicon glyphicon-step-backward" id="music_prev"></i>
        <i class="glyphicon glyphicon-play" id="music_dian"></i>
        <i class="glyphicon glyphicon-step-forward" id="music_next"></i>
    </div>
    <div class="music_right">
        <ul>
            <li><i class="glyphicon glyphicon-volume-up" id="setVolume"></i></li>
            <li>
                <div class="slider">
                    <input type="range" id="volume" min="0" max="100" value="0">
                </div>
            </li>
        </ul>
    </div>
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/play.js"></script>
</body>
</html>

样式文件

其中音量设置是使用滑块器来实现的，这个借鉴的网上的文章。

内容如下：

* {
    margin: 0;
    padding: 0;
}

.music_main {
    position: fixed;
    left: 200px;
    bottom: 0;
    margin-left: 16px;
    margin-right: 16px;
    height: 70px;
    color: #ccc;
    width: 80%;
    box-shadow: 5px -6px 10px #ccc;
}

.music_left {
    float: left;
    height: 70px;
    margin-right: 10px;
}

.music_img {
    width: 70px;
    height: 70px;
}

.play_left {
    float: left;
    width: 450px;
    height: 70px;
}

.play_right {
    float: left;
    width: 400px;
    height: 70px;
    margin-left: 30px;
    color: #000000;
}

.play_left .music_title {
    margin-top: 12px;
    line-height: 28px;
    color: #000000;
}

.play_left .music_title .music_name {
    float: left;
    font-size: 18px;
}

.play_left .music_title .playTimeSpan {
    float: right;
}

.play_left .music_title .totalTimeSpan {
    float: right;
}

.play_left .music_rate {
    float: left;
    width: 98%;
    height: 5px;
    background: #ccc;
    margin-top: 8px;
    margin-left: 8px;
    border-radius: 2px;
}

.play_left .music-progress {
    height: 5px;
    background: #ffb800;
    border-radius: 2px;
    width: 0;
}

.music_right {
    width: 500px;
    height: 70px;
    float: left;
    color: #000000;
}

.music_right ul {
    list-style: none;
}

.music_right ul li {
    float: left;
    margin-left: 32px;
}

#music_prev {
    line-height: 70px;
    font-size: 24px;
    margin-left: 126px;
    margin-right: 21px;
    cursor: pointer;
}

#music_dian {
    line-height: 70px;
    font-size: 24px;
    margin-left: 21px;
    margin-right: 21px;
    cursor: pointer;
}

#music_next {
    line-height: 70px;
    font-size: 24px;
    margin-left: 21px;
    cursor: pointer;
}

#setVolume {
    line-height: 70px;
    font-size: 24px;
    cursor: pointer;
}

.slider {
    position: absolute;
    top: 50%;
    left: 73%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 14px;
    padding: 14px 0 14px 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
}

.slider p {
    font-size: 26px;
    font-weight: 600;
    padding-left: 30px;
}

.slider input[type="range"] {
    -webkit-appearance: none !important;
    width: 200px;
    height: 2px;
    background: #ffdf1f;
    border: none;
    outline: none;
}

.slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 30px;
    height: 30px;
    background: black;
    border: 2px solid black;
    border-radius: 50%;
    cursor: pointer;
}

.slider input[type="range"]::-webkit-slider-thumb:hover {
    background: black;
}

脚本文件

通过js来实现赋值播放器歌曲信息，播放暂停，切歌，设置音量等功能。

其中赋值这块，因为ajax请求默认是异步的，赋值会有问题，所以改为同步请求。

内容如下：

window.onload = function () {
    // 绑定音频元素
    var $player = document.getElementById('player');

    // 绑定播放按钮
    var $dian = document.getElementById('music_dian');

    // 设置音频初始属性
    var volume_num = 0.5;

    // 当前歌曲索引
    var currentIndex = 0;

    // 设置播放列表
    var music_list = [{
        'id': 1,
        'cover': './img/1.jpg',
        'singer': '汪苏泷',
        'song_name': '不分手的恋爱',
        'song_path': '../audio/不分手的恋爱%20–%20汪苏泷.mp3'
    },];

    // 初始化设置
    setInit();

    // 绑定音频控制开关
    $dian.onclick = function () {
        if (this.classList == 'glyphicon glyphicon-play') {
            this.className = 'glyphicon glyphicon-pause';
            $player.play();
        } else {
            // layui-icon-pause
            this.className = 'glyphicon glyphicon-play';
            $player.pause();
        }
    };

    // 设置播放器初始属性
    function setInit() {
        // 设定音量
        $player.volume = volume_num;
        $('#volume').val(volume_num * 100);

        // 通过同步方式获取播放列表信息
        $.ajaxSettings.async = false;
        $.getJSON('./service.php', {}, function (res) {
            // 赋值播放列表
            music_list = res;
        });

        // 设定歌曲封面
        $('#music_img').attr('src', music_list[0].cover);

        // 设定歌曲名称和歌手
        $('.music_name').text(music_list[0].song_name + ' - ' + music_list[0].singer);

        // 设定歌曲路径
        $player.src = music_list[0].song_path;
    }

    // 监听播放器播放时间改变事件
    $player.addEventListener('timeupdate', function () {
        // 当前播放时间
        var currentTime = $player.currentTime;
        // 总时间
        var totalTime = $player.duration;

        // 当是数字的时候
        if (!isNaN(totalTime)) {
            // 得到播放时间与总时长的比值
            var rate = currentTime / totalTime;
            // 设置时间显示
            // 播放时间
            $('.playTimeSpan').text(musicTime(currentTime));
            // 总时长
            $('.totalTimeSpan').text('/' + musicTime(totalTime));
            // 设置进度条
            $('.music-progress').css('width', rate * 441 + 'px');
        }
    });

    // 设置音量
    $('#volume').change(function () {
        volume_num = $(this).val();
        $player.volume = volume_num * 0.01
    });

    // 上一首
    $('#music_prev').click(function () {
        if (currentIndex > 0) {
            currentIndex -= 1;
        } else {
            // 切换到最后一首
            currentIndex = music_list.length - 1;
        }
        // 设置播放标识为暂停
        $dian.className = 'glyphicon glyphicon-play';
        // 播放时间
        $('.playTimeSpan').text('00:00');
        // 设置歌曲进度归零
        $('.music-progress').css('width', '1px');
        // 设置歌曲
        setMusic();
    });

    // 下一首
    $('#music_next').click(function () {
        if (currentIndex < (music_list.length - 1)) {
            currentIndex += 1;
        } else {
            // 切换为第一首
            currentIndex = 0;
        }
        // 设置播放标识为暂停
        $dian.className = 'glyphicon glyphicon-play';
        // 播放时间
        $('.playTimeSpan').text('00:00');
        // 设置歌曲进度归零
        $('.music-progress').css('width', '1px');
        // 设置歌曲
        setMusic();
    });

    // 设置播放器歌曲信息
    function setMusic() {
        // 设定歌曲封面
        $('#music_img').attr('src', music_list[currentIndex].cover);
        // 设定歌曲名称和歌手
        $('.music_name').text(music_list[currentIndex].song_name +
            ' - ' + music_list[currentIndex].singer);
        // 设定歌曲路径
        $player.src = music_list[currentIndex].song_path;
    }

    // 歌曲时长（00:00）
    function musicTime(sens) {
        // 分
        var m = parseInt(sens / 60);
        // 秒
        var s = parseInt(sens % 60);
        // 补零
        m = m > 9 ? m : "0" + m;
        s = s > 9 ? s : "0" + s;
        return m + ":" + s;
    }
};

服务端

使用php语言，主要用于返回数据，因为只是做一个简单播放器，这里只是返回json格式的数据；正常项目中应该做数据处理，再做格式输出。

内容如下：

header('content-type:text/html;charset=utf8 ');

$arr = [
    [
        'id' => 1,
        'cover' => './img/1.jpg',
        'singer' => '汪苏泷',
        'song_name' => '不分手的恋爱',
        'song_path' => './audio/不分手的恋爱%20–%20汪苏泷.mp3'
    ],
    [
        'id' => 2,
        'cover' => './img/2.jpg',
        'singer' => '张镐哲',
        'song_name' => '不是我不小心',
        'song_path' => './audio/不是我不小心%20–%20张镐哲.mp3'

    ],
    [
        'id' => 3,
        'cover' => './img/3.jpg',
        'singer' => '郑源&陶钰玉',
        'song_name' => '不要在我寂寞的时候说爱我',
        'song_path' => './audio/不要在我寂寞的时候说爱我%20–%20郑源&陶钰玉.mp3'
    ],
    [
        'id' => 4,
        'cover' => './img/4.jpg',
        'singer' => '齐秦',
        'song_name' => '不让我的眼泪陪我过夜',
        'song_path' => './audio/不让我的眼泪陪我过夜%20–%20齐秦.mp3'
    ],
];

echo json_encode($arr);

总结

通过固定悬浮在浏览器的底部实现的音乐播放器。主要实现了显示歌曲信息，歌曲播放与暂停，跟随歌曲播放展示相应进度，音量可调节（默认50%），可通过标识进行切歌。

通过音乐播放器练习，对audio属性和事件增进了解、并掌握了怎么应用，下一步准备做一个复杂一些的应用。

借鉴文章

js获取歌曲时长_HTML5教程：使用JS开发简单的音乐播放器_weixin_39552472的博客-CSDN博客

HTML Audio对象属性、方法、事件及音乐播放器应用

Audio对象

常用方法

常用属性

常用事件

音乐播放器

Html页面

样式文件

脚本文件

服务端

总结

猜你喜欢