1.后台配置类 UploadFilePathConfig.java
package com.xxxxxx.controller;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class UploadFilePathConfig extends WebMvcConfigurerAdapter{
@Value("${file.staticAccessPath}")
private String staticAccessPath;
@Value("${file.uploadFolder}")
private String uploadFolder;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);
}
}
2.配置文件
file.staticAccessPath=/api/file/**
file.uploadFolder=d:///uploadFile/
以上两个配置对应后台配置类参数
3.js读取
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
播放
<input type="button" value="开始" id="play"></input>
<input type="button" value="停止" id="stop"></input>
</body>
<script th:src="@{/js/jquery-3.1.0.min.js}"></script>
<script type="text/javascript">
var timeId;
$(function(){
})
$("#play").click(function(){
p();//调用一次音频文件
timeId = setInterval(function () {
p()},3000);每隔3秒调用一次音频文件
})
function p(){
var mp3Url = "http://localhost:8082/api/file/horse.ogg";
var player = new Audio(mp3Url);
player.play(); //播放 mp3这个音频对象
}
$("#stop").click(function(){
clearInterval(timeId);//停止
})
//暂停
//player.pause();
//player.load();
</script>
</html>