Vue动态修改音频url

在网页加载完毕后，动态地通过 this.musicUrl = '音频地址' 添加音频地址，发现并没反应，解决方法如下：

可以通过使用 vue 中的 refs 属性， this.$refs.audio 表示我们绑定一个 ref 属性值为 audio 的标签，设置其的 src 属性，也就是音频的地址，就可以通过动态绑定音乐的播发地址。

效果如下：

var Xut = {}

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')

}

}

---