我希望在我的 laravel 项目中实现 wavesurfer.js 插件,但由于我是 javascript 的完全新手,我什至不知道从哪里开始。
我的音频文件将从我已经设置的 Amazon S3 中提取,但 wavesufer 文档不清楚如何将其添加到我的项目中。我可以将代码直接输入到刀片文件中,还是必须使用 Vue 文件进行设置?
我希望在我的 laravel 项目中实现 wavesurfer.js 插件,但由于我是 javascript 的完全新手,我什至不知道从哪里开始。
我的音频文件将从我已经设置的 Amazon S3 中提取,但 wavesufer 文档不清楚如何将其添加到我的项目中。我可以将代码直接输入到刀片文件中,还是必须使用 Vue 文件进行设置?
您可以通过这种方式直接集成到您的 laravel 项目中。
这是我必须更新的代码。
欢迎.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/wavesurfer.js@2.2.1/dist/wavesurfer.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.0.js"
integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
crossorigin="anonymous">
</script>
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
@if (Route::has('login'))
<div class="top-right links">
@auth
<a href="{{ url('/home') }}">Home</a>
@else
<a href="{{ route('login') }}">Login</a>
@if (Route::has('register'))
<a href="{{ route('register') }}">Register</a>
@endif
@endauth
</div>
@endif
<div class="content">
<div class="title m-b-md">
Wavesurfer laravel
</div>
<div class="links">
<div id="waveform"></div>
<button type="button" name="playbtn" onclick="wavesurfer.play()">Play</button>
<button type="button" name="playbtn" onclick="wavesurfer.pause()">Pause</button>
<span id="currentDuration">00:00</span> / <span id="duration"></span>
</div>
</div>
</div>
<script type="text/javascript">
var wavesurfer;
$(document).ready(function(){
wavesurfer = WaveSurfer.create({
container: "#waveform",
waveColor: 'violet',
progressColor: 'purple',
responsive: true,
// backend: 'MediaElement',
});
// Load the audio file here.
wavesurfer.load('../storage/app/awwdw.mp3');
wavesurfer.on('ready', function () {
let time = wavesurfer.getDuration();
$("#duration").text(formateTime(time));
});
wavesurfer.on('audioprocess', function () {
let time = wavesurfer.getCurrentTime();
$("#currentDuration").text(formateTime(time));
});
function formateTime(time) {
var minutes = Math.floor(time / 60).toFixed(0);
minutes = (minutes < 10)?"0"+minutes:minutes;
var seconds = (time - minutes * 60).toFixed(0);
seconds = (seconds < 10)?"0"+seconds:seconds;
return minutes.substr(-2) + ":" + seconds;
}
});
</script>
</body>
希望这会帮助你。