audio案例(1),2024年最新springboot项目源码

简介: audio案例(1),2024年最新springboot项目源码

正文

})
//获取歌曲链接并插入dom中
function getSong() {
var audio = document.getElementById(“audio”);
audio.src = “C:/Users/Administrator/Desktop/学习新知识/audio/1卡洛儿 - 斯卡布罗集市.mp3”;
audio.loop = true; //歌曲循环
playCotrol(); //播放控制函数
}
//点击播放/暂停
function clicks() {
var audio = document.getElementById(“audio”);
$(“#control”).click(function() {
if ($(“#control”).hasClass(“play”)) {
$(“#control”).addClass(“pause”).removeClass(“play”);
audio.play();//开始播放
dragMove();//并且滚动条开始滑动
$(“#control”).html(“暂停播放”);
} else {
$(“#control”).addClass(“play”).removeClass(“pause”);
$(“#control”).html(“点击播放”);
audio.pause();
}
})
}
//播放时间
function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
var timePlace = document.getElementById(timePlace);
//分钟
var minute = time / 60;
var minutes = parseInt(minute);
if (minutes < 10) {
minutes = “0” + minutes;
}
//秒
var second = time % 60;
seconds = parseInt(second);
if (seconds < 10) {
seconds = “0” + seconds;
}
var allTime = “” + minutes + “” + “:” + “” + seconds + “”
timePlace.innerHTML = allTime;
}
//播放事件监听
function playCotrol() {
audio.addEventListener(“loadeddata”, //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
function() {
$(“#control”).addClass(“play”).removeClass(“color_gray”);
$(“#control”).html(“点击播放”);
addListenTouch(); //歌曲加载之后才可以拖动进度条
var allTime = audio.duration;
timeChange(allTime, “allTime”);
setInterval(function() {
var currentTime = audio.currentTime;
$(“#time .currentTime”).html(timeChange(currentTime, “currentTime”));
}, 1000);
clicks();
}, false);
audio.addEventListener(“pause”,
function() { //监听暂停
$(“#control”).addClass(“play”).removeClass(“pause”);
$(“#control”).html(“点击播放”);
if (audio.currentTime == audio.duration) {
audio.stop();
audio.currentTime = 0;
}
}, false);
audio.addEventListener(“play”,
function() { //监听暂停
$(“#control”).addClass(“pause”).removeClass(“play”);
$(“#control”).html(“暂停播放”);
dragMove();
}, false);
audio.addEventListener(“ended”, function() {
alert(0)
}, false)
}
//进度条
//这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http://www.cnblogs.com/leinov/p/3701951.html
var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离 //设一个全局变量记录上一次内部块滑动的位置
//1拖动监听touch事件
function addListenTouch() {
document.getElementById(“drag”).addEventListener(“touchstart”, touchStart, false);
document.getElementById(“drag”).addEventListener(“touchmove”, touchMove, false);
document.getElementById(“drag”).addEventListener(“touchend”, touchEnd, false);
var drag = document.getElementById(“drag”);
var speed = document.getElementById(“speed”);
}
//touchstart,touchmove,touchend事件函数
function touchStart(e) {
e.preventDefault();
var touch = e.touches[0];
startX = touch.pageX;
}
function touchMove(e) { //滑动
e.preventDefault();
var touch = e.touches[0];
x = touch.pageX - startX; //滑动的距离
//drag.style.webkitTransform = ‘translate(’ + 0+ 'px, ’ + y + ‘px)’; //也可以用css3的方式
drag.style.left = aboveX + x + “px”; //
speed.style.left = -((window.innerWidth) - (aboveX + x)) + “px”;
}
function touchEnd(e) { //手指离开屏幕
e.preventDefault();
aboveX = parseInt(drag.style.left);
var touch = e.touches[0];
var dragPaddingLeft = drag.style.left;
var change = dragPaddingLeft.replace(“px”, “”);
numDragpaddingLeft = parseInt(change);
var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖动圆圈的长度,减掉是为了让歌曲结束的时候不会跑到window以外
audio.currentTime = currentTime;
}
//3拖动的滑动条前进
function dragMove() {

结尾

正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。


目录
打赏
0
0
0
0
80
分享
相关文章
elasticsearch学习五:springboot整合 rest 操作elasticsearch的 实际案例操作,编写搜索的前后端,爬取京东数据到elasticsearch中。
这篇文章是关于如何使用Spring Boot整合Elasticsearch,并通过REST客户端操作Elasticsearch,实现一个简单的搜索前后端,以及如何爬取京东数据到Elasticsearch的案例教程。
353 0
elasticsearch学习五:springboot整合 rest 操作elasticsearch的 实际案例操作,编写搜索的前后端,爬取京东数据到elasticsearch中。
Springboot整合shiro,带你学会shiro,入门级别教程,由浅入深,完整代码案例,各位项目想加这个模块的人也可以看这个,又或者不会mybatis-plus的也可以看这个
本文详细讲解了如何整合Apache Shiro与Spring Boot项目,包括数据库准备、项目配置、实体类、Mapper、Service、Controller的创建和配置,以及Shiro的配置和使用。
1077 1
Springboot整合shiro,带你学会shiro,入门级别教程,由浅入深,完整代码案例,各位项目想加这个模块的人也可以看这个,又或者不会mybatis-plus的也可以看这个
springboot项目启动报错-案例情景介绍
springboot项目启动报错-案例情景介绍
144 2
Spring Boot与微服务治理框架的集成成功案例
Spring Boot与微服务治理框架的集成成功案例
Spring Boot与WebFlux的实战案例
Spring Boot与WebFlux的实战案例
|
9月前
|
案例 采用Springboot默认的缓存方案Simple在三层架构中完成一个手机验证码生成校验的程序
案例 采用Springboot默认的缓存方案Simple在三层架构中完成一个手机验证码生成校验的程序
150 5
Springboot mvc开发之Rest风格及RESTful简化开发案例
Springboot mvc开发之Rest风格及RESTful简化开发案例
118 2
2万字实操案例之在Springboot框架下基于注解用Mybatis开发实现基础操作MySQL之预编译SQL主键返回增删改查
2万字实操案例之在Springboot框架下基于注解用Mybatis开发实现基础操作MySQL之预编译SQL主键返回增删改查
124 2
基于SpringBoot+Vue+uniapp的课程案例库平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课程案例库平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课程案例库平台的详细设计和实现(源码+lw+部署文档+讲解等)
|
10月前
|
Springboot中Processor注解概念以及实战案例
【5月更文挑战第28天】在Spring Boot中,没有直接名为Processor的注解。不过,你可能是在谈论与Spring Boot相关的注解处理器(Annotation Processors)的概念,尤其是在处理自定义注解或@ConfigurationProperties注解时的情况。
472 1

热门文章

最新文章

目录
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等