var isAudio = false
var audioOnce = null
var chatid = ''
var fixaudio = function() {
if (!isAudio) {
isAudio = true
Xut.newaudio = new Audio()
document.removeEventListener('touchstart', fixaudio, false)
}
}
document.addEventListener('touchstart', fixaudio, false)
只要碰到页面就创建的了一个audio对象，然后再像这个对象中添加src地址，然后使用play()就可以播放了
if (Xut.newaudio) {
audio = Xut.newaudio
audio.src = url
} else {
Xut.newaudio = new Audio()
audio = Xut.newaudio
audio.src = url
}
这样通过动态添加src，就可以实现循环播放了
var clickplaying = 0
function toplay(list, index, allUrl,allMsgID,chatId) {
if (index >list.length - 1) {
clickplaying = 1
return
}
var icon = list[index].children[0]
var url = allUrl[index]
if (index === audioOnce) { //点击的是同一个
if (audio.paused) { //暂停状态
audio.autoplay = true
audio.play()
icon.setAttribute('class', 'voice-icon played')
} else {
audio.pause()
icon.setAttribute('class', 'voice-icon paused')
}
} else { //点击的不是同一个
//其他暂停
toPause()
//储存播放后状态
var readId = window.localStorage.getItem(chatId)
if(readId){
var setReadId = readId.split(',')
setReadId.push(allMsgID[index]).toString()
}else {
var setReadId = [allMsgID[index]].toString()
}
window.localStorage.setItem(chatId,setReadId)
var setRead = document.getElementsByClassName('setread')
if(setRead[index].children[0]){
setRead[index].children[0].setAttribute('class', '')
}
audioOnce = index
icon.setAttribute('id', 'anchor')
console.log(url)
console.log(Xut.newaudio)
if (Xut.newaudio) {
audio = Xut.newaudio
audio.src = url
} else {
Xut.newaudio = new Audio()
audio = Xut.newaudio
audio.src = url
}
audio.load()
audio.onloadstart = function() {
icon.setAttribute('class', 'voice-icon playloading')
}
audio.oncanplaythrough = function() {
icon.setAttribute('class', 'voice-icon played')
audio.autoplay = true
audio.play()
}
audio.onended = function() {
icon.setAttribute('class', 'voice-icon paused')
toplay(list, index + 1, allUrl,allMsgID,chatId)
}
}
}
我这个地方使用的vue1.0写的。所以使用了watch来监听数据的变化，如果数据有变化，分别给每个页面的ui播放按钮绑定点击事件，并且如果没有播放的情况下，来的数据是音频，那么就自动播放
watch: {
talkList: function() {
var that = this
var list = document.getElementsByClassName("voiceSize")
var listLength = this.talkList
var allUrl = []
var allSize = []
var allMsgID = []
for (j = 0j <listLength.lengthj++) {
if (listLength[j].MSG_TYPE == 'VOICE') {
this.showonce = 1
allUrl.push(listLength[j].MEDIA_URL)
allSize.push(listLength[j].MEDIA_SIZE)
allMsgID.push(listLength[j].MSG_ID)
}
}
for (var i = 0, len = list.lengthi <leni++) {
list[i].style.width = size(parseFloat(allSize[i])) + '%'
list[i].onclick = (function(index) {
return function() {
toplay(list, index, allUrl,allMsgID,that.radioID)
}
})(i)
}
if(listLength.length){
if(listLength[listLength.length-1].MSG_TYPE == 'VOICE' && clickplaying==1){
toplay(list, list.length-1, allUrl,allMsgID,that.radioID)
}
}
},
rightTalkList:function () {
this.rightScroll()
}
},
当然点击不同的播放按钮的其它的都应该暂停，其实这里只需要换一下页面上的显示而已，因为页面中就只有一个audio标签，所以点击其它的不存在暂停一说，src替换了就不可能还会播放了。
//点击其他播放按钮暂停时页面状态显示
function toPause() {
var icon = document.getElementsByClassName('voice-icon')
for (n = 0n <icon.lengthn++) {
icon[n].setAttribute('class', 'voice-icon paused')
icon[n].removeAttribute('id')
}
}
下面的JS代码可以动态修改图片地址，以显示一张新的图片，实际上是通过修改图片的src属性来实现的<!DOCTYPE html>
<html>
<head>
<script>
function changeSrc()
{
document.getElementById("myImage").src="hackanm.gif"
}
</script>
</head>
<body>
<img id="myImage" src="compman.gif" width="107" height="98">
<br><br>
<input type="button" onclick="changeSrc()" value="Change image">
<p><b>Note:</b>The src property can be changed at any time.
However, the new image inherits the height and width
attributes of the original image,
if not new height and width properties are specified.</p>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
<iframe class="bottom" v-bind:src=this.rt></iframe>
data中定义contents
后续需要就给contents赋值就行
this.contents= this.five_params.pendingURL+response.orderToken+'&id='+this.five_params.id
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）