vue
<template>
<div>
<button @click="btn1">按钮</button>
<view class="">
{{ arr[currentIndex].name }}
</view>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{ name: "yy" },
{ name: "xx" },
{ name: "ww" },
{ name: "qq" },
],
currentIndex: 0,
};
},
methods: {
btn1() {
this.currentIndex = (this.currentIndex + 1) % this.arr.length;
},
},
};
</script>
jq
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义播放器</title>
<style>
#myVideo {
width: 100%;
}
</style>
</head>
<body>
<audio id="myAudio" controls>
<source src="./until/1.mp3" type="./until/1.mp3">
</audio>
<div>
<button id="playbackSpeedBtn">1x</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var audio = document.getElementById("myAudio");
var playbackSpeeds = [1, 1.5, 2]; // 可以根据需要添加其他倍速
let i = 0
$('#playbackSpeedBtn').click(function(){
let c = i++ % playbackSpeeds.length
$(this).text(`${playbackSpeeds[c]}x`)
})
$("#playbackSpeedBtn").click(function() {
var currentSpeed = parseFloat(audio.playbackRate);
console.log('currentSpeed :>> ', currentSpeed);
var nextSpeedIndex = (playbackSpeeds.indexOf(currentSpeed) + 1) % playbackSpeeds.length;
var nextSpeed = playbackSpeeds[nextSpeedIndex];
audio.playbackRate = nextSpeed;
$(this).text(nextSpeed + "x");
});
});
</script>
</body>
</html>
