Почему я не могу воспроизвести этот mp3 с помощью jquery и библиотеки jquery ui?

Question

Почему я не могу воспроизвести этот mp3 с помощью jquery и библиотеки jquery ui?

0

По какой-то причине я не могу получить mp3, который я хочу сыграть, чтобы играть с этим кодом. Здесь скрипка: http://jsfiddle.net/haGYL/

Здесь код:

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

Brandon 27 апр. 2014, в 08:34

Источник

0

документ готовый обработчик. jsfiddle.net/haGYL/1
Satpal 27 апр. 2014, в 06:29

Теги:

javascript

jquery

2 ответа

0

здесь ваш код работает jsfiddle

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

Dave 27 апр. 2014, в 04:35

Ещё вопросы

документ готовый обработчик. jsfiddle.net/haGYL/1

Krishanu Dey · Accepted Answer · 2014-04-27T04-22-00.000Z

Соблюдайте следующую часть кода.

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

Обратите внимание, что вы также предоставляете расширение. Таким образом, при выполнении метода playAudio эффективный 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 следующим образом:

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

Заметьте, я не передаю расширение. См. JSFiddle ниже.

демонстрация