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

news2024/11/28 16:31:23

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

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

效果：

目录

Audio对象

常用方法

常用属性

常用事件

音乐播放器

Html页面

样式文件

脚本文件

服务端

总结

 

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中的图标，所以引入了bootstrap的css样式，可以自行下载。

内容如下：

<!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博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/779796.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C进阶：内存操作函数

C进阶：内存操作函数

内存操作函数 memcpy 头文件&#xff1a;string.h 基本用途&#xff1a;进行不相关&#xff08;不重叠的内存&#xff09;拷贝。 函数原型&#xff1a;void* memcpy(void* destination,//指向目标数据的指针 const void* source,//指向被拷贝数据的指针 size_t num);//拷贝的数…
阅读更多...
ES6解构对象、数组、函数传参

ES6解构对象、数组、函数传参

目录 1.对象解构 2.对象解构的细节处理 2.1.解构的值对象中不存在时 2.2.给予解构值默认参数 2.3.非同名属性解构 3.数组解构 3.1基础解构语法 3.2数组嵌套解构 4.函数解构传参 5.解构小练习 在ES6的新语法中新增了解构的方法&#xff0c;它可以让我们很方便的从数组或…
阅读更多...
如何实现两个对象之间的属性拷贝

如何实现两个对象之间的属性拷贝

两个对象之间的属性拷贝 你可以使用Java的BeanUtils类或类似工具来实现两个对象之间的属性拷贝。以下是一个示例代码&#xff1a; import org.apache.commons.beanutils.BeanUtils;public class CopyPropertiesExample {public static void main(String[] args) throws Excep…
阅读更多...
java学习路程之篇一、进阶知识、面向对象高级、static关键字、继承、final关键字、this、super

java学习路程之篇一、进阶知识、面向对象高级、static关键字、继承、final关键字、this、super

文章目录 面向对象高级static关键字继承final关键字 面向对象高级 static关键字 继承 final关键字
阅读更多...
【统计课堂】SPSS统计分析- R×C列联表资料统计方法的选择

【统计课堂】SPSS统计分析- R×C列联表资料统计方法的选择

之前我们提到RC列联表资料&#xff0c;列联表根据变量是否有序可以分为双向无序、单项有序、双向有序列联表&#xff0c;他们的统计方法是不同的 一、双向无序列联表 双向无序列联表是指行、列变量均为无序的列联表&#xff0c;比如不同污染地区的动物畸形率是否有差异&#x…
阅读更多...
RT1052的时钟

RT1052的时钟

文章目录 时钟主时钟图时钟树 系统时钟 时钟 主时钟图表明了各个 PLL 时钟&#xff08;总共 7 个 PLL&#xff09;的由来和通路&#xff1b;时钟树图&#xff0c;则表明了 RT1052 内部各个根时钟&#xff08;CLK ROOT&#xff09;的由来和通路。 主时钟图 图中总共有7个PLL&…
阅读更多...
mybatis sql 参数自动填充

mybatis sql 参数自动填充

项目中打印sql&#xff0c;参数都是需要自己复制进去,很不方便&#xff0c;例如: Preparing: SELECT id,product_code,product_name,del_flag,create_time,create_by,update_time,update_by,remark FROM product_info WHERE (del_flag ?) LIMIT ? > Parameters: false(B…
阅读更多...
结构型设计模式之外观模式【设计模式系列】

结构型设计模式之外观模式【设计模式系列】

系列文章目录 C技能系列 Linux通信架构系列 C高性能优化编程系列 深入理解软件架构设计系列 高级C并发线程编程 设计模式系列 期待你的关注哦&#xff01;&#xff01;&#xff01; 现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everythi…
阅读更多...
DNS协议详解

DNS协议详解

DNS协议详解 DNS协议介绍DNS解析过程DNS查询的方式递归查询迭代查询区别 DNS协议介绍 DNS 协议是一个应用层协议&#xff0c;它建立在 UDP 或 TCP 协议之上&#xff0c;默认使用 53 号端口。该协议的功能就是将人类可读的域名 (如&#xff0c;www.qq.com) 转换为机器可读的 IP…
阅读更多...
【深度学习】RNN学习笔记

【深度学习】RNN学习笔记

RNN学习笔记 时间序列 将单词序列转换为向量&#xff0c;这里有五个单词&#xff0c;然后对于每一个单词都进行独热编码&#xff0c;编码成一个特定的向量。 对于RNN网络&#xff0c;需要一次性读取多个句子&#xff0c;那么涉及到batch_size&#xff0c;这里第二个表达就是&a…
阅读更多...
Vue上传图片返回base64并在页面展示，并图片上canvas进行红框框选标记

Vue上传图片返回base64并在页面展示，并图片上canvas进行红框框选标记

https://www.cnblogs.com/szqtiger/p/12100754.html vue如何显示base64图片_vue显示base64_不断学习的码农的博客-CSDN博客 图片上进行红框框选_时小帅的博客-CSDN博客 设置canvas画布大小_canvas设置画布大小_最凶残的小海豹的博客-CSDN博客 图片回显 结合以上&#xff0…
阅读更多...
MySQL8 新特性——窗口函数用法

MySQL8 新特性——窗口函数用法

MySQL8 新特性——窗口函数用法 MySQL 8.0 是 MySQL 数据库管理系统的一个重要版本&#xff0c;引入了许多新特性和改进。以下是 MySQL 8.0 的一些主要新特性&#xff1a; 事务隔离级别改进&#xff1a; MySQL 8.0 引入了新的事务隔离级别 SERIALIZABLE&#xff0c;提供了最高…
阅读更多...
妙记多 Mojidoc PC端（Mac 端+windows端）Beta版本正式上线！

妙记多 Mojidoc PC端（Mac 端+windows端）Beta版本正式上线！

你们呼唤了无数次的妙记多 Mojidoc PC客户端 Beta版本正式上线啦&#xff01; 感谢300位妙友积极参与内测&#xff0c;给予了我们很多非常有效的意见和建议&#xff01;我们会根据用户反馈不断优化和修复相关功能&#xff0c;在此感谢妙友们一直以来的支持&#xff5e; PC端拥…
阅读更多...
静态html引入ucharts并直接使用组件标签

静态html引入ucharts并直接使用组件标签

由于官方不能直接使用qiun-vue-ucharts在静态html页面使用。 DIY可视化对此类库进行了改进&#xff0c;把它的包独立打包成一个可以依赖的JS。 首先定义一个核心JS&#xff0c;用于打包生成uchart import qiunVueUcharts from qiun/vue-ucharts;const install (app) > {…
阅读更多...
el-select实现el-option可编辑

el-select实现el-option可编辑

鼠标悬浮出现编辑图标 点击编辑图标对选择项进行修改 核心代码如下&#xff0c;注意el-input不要使用focus&#xff0c;会导致el-select面板收起来&#xff1b;使用click.native.stop即可 <el-select v-model"value" placeholder"选择" style"widt…
阅读更多...
酷雷曼无人机技能培训考试圆满举办

酷雷曼无人机技能培训考试圆满举办

2023年7月18日、19日&#xff0c;以“向云端起航&#xff0c;让技术落地”为主题的酷雷曼无人机技能提升培训会在酷雷曼北京运营中心隆重举行&#xff0c;来自全国各地的众多合作商参加了本次培训&#xff0c;通过系统、全面的学习成功取得了专业无人机飞行员执照&#xff0c;为…
阅读更多...
基于linux下的高并发服务器开发（第三章）- 3.10 死锁

基于linux下的高并发服务器开发（第三章）- 3.10 死锁

deadlock.c #include <stdio.h> #include <pthread.h> #include <unistd.h>// 全局变量&#xff0c;所有的线程都共享这一份资源。 int tickets 1000;// 创建一个互斥量 pthread_mutex_t mutex;void * sellticket(void * arg) {// 卖票while(1) {// 加锁pt…
阅读更多...
十、正则表达式详解：掌握强大的文本处理工具（二）

十、正则表达式详解：掌握强大的文本处理工具（二）

文章目录 &#x1f340;多字符匹配&#x1f340;匹配规则的代替&#x1f340;特殊的匹配&#x1f340;特殊的匹配plus&#x1f340;总结 &#x1f340;多字符匹配 星号&#xff08;*&#xff09;&#xff1a;匹配0个或者多个字符 import retext 111-222-333 result re.matc…
阅读更多...
Cardboard for Pictures(cf)

Cardboard for Pictures(cf)

Mircea有n张照片&#xff0c;第 i 张照片的是边长为si的正方形&#xff0c;他把每张照片都装在一块正方形的硬纸板上&#xff0c;这样每张照片的四周都有一个w厘米的硬纸板边框。他总共用了 c 立方厘米见方的硬纸板。给定图片大小和值c&#xff0c;求w。&#xff08;请注意&…
阅读更多...
Java-API简析_java.net.InetSocketAddress类（基于 Latest JDK）（浅析源码）

Java-API简析_java.net.InetSocketAddress类（基于 Latest JDK）（浅析源码）

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/131870760 出自【进步*于辰的博客】 因为我发现目前&#xff0c;我对Java-API的学习意识比较薄弱…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023