我正在一个应用程序中工作，我需要播放与点击相关的音频。我通过网络服务获得了这些音频。所以我创建了一个骨干结构来播放音频。我正在使用html5音频播放器。我正在使用.wav文件进行音频处理。我正在使用Chrome浏览器。 但 当我点击自定义前进或后退按钮时，音频正在播放。
单击自定义前进或后退按钮时，它应从当前位置向前移动或从当前位置后退音频。但这并没有发生，它从一开始就重播音频。我该如何解决这个错误，请有人帮我解决这个问题。
但是当我刷新页面或重新打开浏览器然后一切正常工作时，意味着前进按钮将音频从当前位置向前移动并且倒带将正确倒带。
<audio id="myMusic" class="music" preload="true" autofocus>
<source src="<%= data.audioFileName %>">
</audio>
<div class="audioplayer-msg1">Loading Audio File..</div>
<div class="audioplayer">
<div class="play-component">
<button class="rButton rewind" title="Rewind (<F3>)" disabled></button>
<button class="pButton play" title="Play (<F2>)"></button>
<button class="fButton forward" title="Forward (<F4>)"></button>
</div>
<div class="volume-component">
<button class="tButton loud" title="Volume Decrease"></button>
<div class="audioSlider"></div>
<button class="sButton sound" title="Volume Increase"></button>
</div>
<div class="seekBar-component">
<div class="timeline" title="Drag to jump to a time"></div>
<span class="endTime right lables" ></span>
</div>
</div>
define(['backbone', 'marionette', 'eventAggregator', 'jquery-ui', 'underscore', 'tpl!modules/audioPlayer/audioPlayer.html', 'properties/properties'], function(Backbone, Marionette, EventAggregator, jqueryui, _, audioPlayerTpl, properties) {
var duration = 0;
var musicPlayer;
return Marionette.ItemView.extend({
template: audioPlayerTpl,
initialize: function() {
this.listenTo(this.model, "change", this.render);
_.bindAll(this, 'on_keypress');
$(document).bind('keydown', this.on_keypress);
},
on_keypress: function(e) {
var audioLoadChk = localStorage.getItem("audioLoadStatus");
if (audioLoadChk == "loaded") {
switch (e.keyCode) {
case 115:
this.forward(e);
e.preventDefault();
break;
case 113:
this.play(e);
break;
case 114:
this.rewind(e);
e.preventDefault();
}
}
},
onDestroy: function() {
//delete previous audio
if (musicPlayer) {
musicPlayer.setAttribute('src', "");
$(document).unbind("keydown");
$(".audioplayer-msg1").show();
}
},
onDomRefresh: function() {
EventAggregator.on('playAudio', this.play.bind(this));
EventAggregator.on('forwardAudio', this.forward.bind(this));
EventAggregator.on('rewindAudio', this.rewind.bind(this));
$(".audioplayer").hide();
$(".audioplayer-msg").hide();
$(".audioplayer-msg1").show();
localStorage.setItem("audioLoadStatus", "loaded");
musicPlayer = this.$('.music')[0];
var timeline = this.$('.timeline'); // timeline
var self = this;
// timeupdate event listener
musicPlayer.addEventListener("timeupdate", this.timeUpdate, false);
musicPlayer.addEventListener("canplaythrough", function() {
duration = this.duration;
self.$('.endTime').empty().append(self.formatSecondsAsTime(duration));
var showLabel = function(event, ui) {
var curValue = "0:00";
var target = $('.timeline .ui-slider-handle');
var tooltip = '<div class="tooltip"><div class="tooltip-inner audioplayer-tooltip">' + curValue + '</div></div>';
$(".audioplayer-msg1").hide();
$(".audioplayer").show();
$(target).html(tooltip);
};
self.$('.timeline').slider({
orientation: "horizontal",
value: musicPlayer.currentTime,
min: 0,
max: duration,
range: 'min',
animate: "slow",
step: .1,
create: showLabel,
slide: function(e, ui) {
//showLabel();
musicPlayer.pause(e);
self.$(".pButton").removeClass("pause");
self.$(".pButton").addClass("play");
musicPlayer.currentTime = ui.value;
self.$(".pButton").prop('title', 'Play (<F2>)');
},
stop: function(e, ui) {
musicPlayer.play();
self.$(".pButton").removeClass("play");
self.$(".pButton").addClass("pause");
self.$(".pButton").prop('title', 'Pause (<F2>)');
}
});
}, false);
currentSecond = {
getCurrentSecond: function(cTime) {
return self.formatSecondsAsTime(cTime);
}
}
this.$('.audioSlider').slider({
orientation: "horizontal",
value: 0.5,
min: 0,
max: 1,
range: 'min',
animate: "slow",
step: .1,
slide: function(e, ui) {
/* Volume Button enble/disable*/
if (ui.value == 0) {
$(".tButton").attr("disabled", "disabled");
} else if (ui.value != 0) {
$(".tButton").removeAttr("disabled");
}
if (ui.value == 1) {
$(".sButton").attr("disabled", "disabled");
} else if (ui.value != 1) {
$(".sButton").removeAttr("disabled");
}
musicPlayer.volume = ui.value;
}
});
},
events: {
'click .pButton': 'play',
'click .fButton': 'forward',
'click .rButton': 'rewind',
'click .sButton': 'volumeUp',
'click .tButton': 'volumeDown'
},
play: function(ev) {
// start music
if (musicPlayer.paused) {
console.log("paused")
musicPlayer.play(ev);
// remove play, add pause
this.$(".pButton").removeClass("play");
this.$(".pButton").addClass("pause");
this.$(".pButton").prop('title', 'Pause (<F2>)');
} else { // pause music
console.log("play")
musicPlayer.pause(ev);
// remove pause, add play
this.$(".pButton").removeClass("pause");
this.$(".pButton").addClass("play");
this.$(".pButton").prop('title', 'Play (<F2>)');
}
},
forward: function(ev) {
//musicPlayer.pause(ev);
if (musicPlayer.currentTime == duration) {
musicPlayer.pause();
self.$('.pButton').removeClass("pause");
self.$('.pButton').addClass("play");
} else {
var dur = musicPlayer.currentTime;
musicPlayer.play();
musicPlayer.currentTime = dur + 3;
self.$('.pButton').removeClass("play");
self.$('.pButton').addClass("pause");
}
},
rewind: function(ev) {
if (musicPlayer.currentTime > 0) {
//musicPlayer.pause();
musicPlayer.currentTime = musicPlayer.currentTime - 3;
musicPlayer.play();
self.$('.pButton').removeClass("play");
self.$('.pButton').addClass("pause");
}
},
volumeDown: function(ev) {
if (this.$(".audioSlider").slider("value") > 0) {
musicPlayer.volume = this.$(".audioSlider").slider("value") - 0.1;
this.$(".audioSlider").slider('value', musicPlayer.volume);
}
/* Volume Button enble/disable*/
if (this.$(".audioSlider").slider("value") == 0) {
$(".tButton").attr("disabled", "disabled");
}
if (this.$(".audioSlider").slider("value") >= 0.1) {
$(".sButton").removeAttr("disabled");
}
/* */
},
volumeUp: function(ev) {
if (this.$(".audioSlider").slider("value") < 1) {
musicPlayer.volume = this.$(".audioSlider").slider("value") + 0.1;
this.$(".audioSlider").slider('value', musicPlayer.volume);
}
if (this.$(".audioSlider").slider("value") == 1) {
$(".sButton").attr("disabled", "disabled");
}
if (this.$(".audioSlider").slider("value") < 1) {
$(".tButton").removeAttr("disabled");
}
},
// timeUpdate
// Synchronizes playhead position with current point in audio
timeUpdate: function(e) {
if (musicPlayer.currentTime >= 3) {
self.$(".rButton").removeAttr("disabled");
} else {
self.$(".rButton").attr("disabled", "disabled");
}
if (duration) {
if (musicPlayer.currentTime <= (duration - 3)) {
self.$(".fButton").removeAttr("disabled");
} else {
self.$(".fButton").attr("disabled", "disabled");
}
}
//if (musicPlayer.currentTime) {
self.$('.audioplayer-tooltip').empty().append(currentSecond.getCurrentSecond(musicPlayer.currentTime));
self.$(".timeline").slider('value', musicPlayer.currentTime);
//console.log(musicPlayer.currentTime + "==" + duration);
if (musicPlayer.currentTime == duration) {
self.$('.audioplayer-tooltip').empty();
self.$('.pButton').removeClass("pause");
self.$('.pButton').addClass("play");
}
//}
},
formatSecondsAsTime: function(secs) {
var hr = Math.floor(secs / 3600);
var min = Math.floor((secs - (hr * 3600)) / 60);
var sec = Math.floor(secs - (hr * 3600) - (min * 60));
if (hr < 10) {
hr = hr;
}
if (min < 10) {
min = min;
}
if (sec < 10) {
sec = "0" + sec;
}
return (hr > 0) ? (hr + ":" + ((min > 10) ? min : '0' + min) + ':' + sec) : (min + ':' + sec);
}
});
}）;