Javascript 为什么我无法使用jquery和jquery ui库播放此mp3？

由于某些原因，我无法获得我想要播放的mp3来播放此代码。这是小提琴：

代码如下：

 <style>
 #player {
 width: 350px;
 height: 50px;    
 position: relative;
 margin: 0 auto;
 top: 150px;
 background: url('http://iviewsource.com/exercises/audioslider/images/volume-background.png') no-repeat left top;
 }

#volume {
position: absolute;
left: 24px;
margin: 0 auto;
height:15px;
width: 300px;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-empty.png') no-repeat left top;
border: none;
outline: none;
}

#volume .ui-slider-range-min {
height:15px;
width: 300px;
position: absolute;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-full.png') no-repeat left top;
  border: none;
 outline: none;
}

#volume .ui-slider-handle {
width: 38px;
height:39px;
background: url('http://iviewsource.com/exercises/audioslider/images/volume-knob.png') no-repeat left top;
position: absolute;
margin-left: -15px;
cursor: pointer;
outline: none;
border: none;
}

</style>
<script>
$("#volume").slider({
min: 0,
max: 100,
value: 0,
    range: "min",
    animate: true,
slide: function(event, ui) {
  setVolume((ui.value) / 100);
}
});

var myMedia = document.createElement('audio');
$('#player').append(myMedia);
myMedia.id = "myMedia";
playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3', 0);

function playAudio(fileName, myVolume) {
var mediaExt = (myMedia.canPlayType('audio/mp3')) ? '.mp3' 
: (myMedia.canPlayType('audio/ogg')) ? '.ogg' 
: '';
if (mediaExt) {
myMedia.src = fileName + mediaExt;
myMedia.setAttribute('loop', 'loop');
setVolume(myVolume);
myMedia.play();
}
}

function setVolume(myVolume) {
var myMedia = document.getElementById('myMedia');
myMedia.volume = myVolume;
}
</script>
<div id="player">
<div id="volume"></div>
</div>

#玩家{
宽度：350px；
高度：50px；
位置：相对位置；
保证金：0自动；
顶部：150px；
背景：url（'http://iviewsource.com/exercises/audioslider/images/volume-background.png'）不重复左上；
}
#卷{
位置：绝对位置；
左：24px；
保证金：0自动；
高度：15px；
宽度：300px；
背景：url（'http://iviewsource.com/exercises/audioslider/images/volume-empty.png'）不重复左上；
边界：无；
大纲：无；
}
#volume.ui滑块范围最小值{
高度：15px；
宽度：300px；
位置：绝对位置；
背景：url（'http://iviewsource.com/exercises/audioslider/images/volume-full.png'）不重复左上；
边界：无；
大纲：无；
}
#volume.ui滑块句柄{
宽度：38px；
高度：39px；
背景：url（'http://iviewsource.com/exercises/audioslider/images/volume-knob.png'）不重复左上；
位置：绝对位置；
左边距：-15px；
光标：指针；
大纲：无；
边界：无；
}
$（“#卷”）.滑块({
分:0,，
最高：100，
值：0，
射程：“分钟”，
动画：对，
幻灯片：功能（事件、用户界面）{
设置音量（（用户界面值）/100）；
}
});
var myMedia=document.createElement（'audio'）；
$（“#播放器”）.append（myMedia）；
myMedia.id=“myMedia”；
播放音频（'http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3', 0);
函数playAudio（文件名，myVolume）{
var mediaExt=（myMedia.canPlayType（'audio/mp3'））？'.mp3'
：（myMedia.canPlayType（'audio/ogg'））？'.ogg'
: '';
中频（mediaExt）{
myMedia.src=fileName+mediaExt；
setAttribute（'loop'，'loop'）；
设置音量（myVolume）；
myMedia.play（）；
}
}
函数设置卷（myVolume）{
var myMedia=document.getElementById（'myMedia'）；
myMedia.volume=myVolume；
}

遵守代码的以下部分

function playAudio(fileName, myVolume) {

  // here you are checking if player can mp3 or ogg file
  var mediaExt = (myMedia.canPlayType('audio/mp3')) ? '.mp3' 
    : (myMedia.canPlayType('audio/ogg')) ? '.ogg' 
    : '';
  if (mediaExt) {

    //here you are adding the extention that the player can play with the passed file url. So if url is www.xxx.com/myAudioFile and mediaExt is .mp3, here it will become www.xxx.com/myAudioFile.mp3
    myMedia.src = fileName + mediaExt;
    myMedia.setAttribute('loop', 'loop');
    setVolume(myVolume);
    myMedia.play();
  }
}

您正在调用上述函数作为

playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3', 0);

请注意，您还提供了扩展。 因此，在执行

playaudo

方法时，有效的文件url如下所示

http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3.mp3
OR
http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3.ogg

playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b', 0);

因此，要运行代码，只需调用

playAudio

函数，如下所示

http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3.mp3
OR
http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b.mp3.ogg

playAudio('http://www.catholic.com/sites/default/files/audio/radioshows/ca140331b', 0);

注意，我没有通过分机。 请参阅下面的JSFiddle

---

这是您的代码

处理程序。